How to get a reference to target element inside a callback

Question

I'm building a component which displays a series of generic input fields. The backing store uses a simple array of key-value pairs to manage the data:

[
{fieldkey: 'Signs and Symptoms', value:'fever, rash'},
{fieldkey: 'NotFeelingWell', value:'false'},
{fieldkey: 'ReAdmission', value:'true'},
{fieldkey: 'DateOfEvent', value:'12/31/1999'}
]

In order to eliminate a lot of boilerplate code related to data binding, the component uses these same keys when generating the HTML markup (see 'data-fieldname' attribute).

var Fields = React.createClass({

handleOnChange:function(e){

    Actions.updateField( {key:e.target.attributes['data-fieldname'].value, value:e.target.value})
},
setValue:function(){
    var ref = //get a reference to the DOM element that triggered this call
    ref.value = this.props.form.fields[ref.attributes['data-fieldname']]
},

render:function(){


 return (<div className="row">
  <Input  data-fieldname="Signs and Symptoms" type="text" label='Notes' defaultValue="Enter text" onChange={this.handleOnChange} value={this.setValue()} />
  <Input  data-fieldname="NotFeelingWell"  type="checkbox" label="Not Feeling Well" onChange={this.handleOnChange} value={this.setValue()}  />
  <Input  data-fieldname="ReAdmission"  type="checkbox" label="Not Feeling Great" onChange={this.handleOnChange} value={this.setValue()} />
  <Input  data-fieldname="DateOfEvent"  type="text" label="Date Of Event"  onChange={this.handleOnChange} value={this.setValue()} />

</div>)
}

})

My goal is to use the same two functions for writing/reading from the store for all inputs and without code duplication (i.e. I don't want to add a refs declaration to each input that duplicates the key already stored in 'data-fieldname') Things work swimmingly on the callback attached to the 'onChange' event. However, I'm unsure how to get a reference to the DOM node in question in the setValue function.

Thanks in advance

At the moment this.setValue() is executed, the component/element that is associated with that call doesn't even exist yet. — Felix Kling
– Felix Kling, Commented Apr 16, 2015 at 18:20
Point well taken. Can you suggest an alternative approach that avoids key duplication? — Mitch A
– Mitch A, Commented Apr 16, 2015 at 18:37
Store the information as an array of objects (for example) and generate the elements dynamically? — Felix Kling
– Felix Kling, Commented Apr 16, 2015 at 18:53

Felix Kling · Accepted Answer · 2015-04-16 20:02:34Z

1

I'm not sure if I understand your question right, but to reduce boilerplate I would map your array to generate input fields:

 render:function(){
 var inputs = [];
 this.props.form.fields.map(function(elem){
     inputs.push(<Input  data-fieldname={elem.fieldkey}  type="text" label="Date Of Event"  onChange={this.handleOnChange} value={elem.value} />);
 });

 return (<div className="row">
  {inputs}

</div>)
}

This will always display your data in props. So when handleOnChange gets triggered the component will rerender with the new value. In my opinion this way is better than accessing a DOM node directly.

edited Apr 16, 2015 at 20:02

Felix Kling

820k181 gold badges1.1k silver badges1.2k bronze badges

answered Apr 16, 2015 at 18:56

Dustin Hoffner

2,1651 gold badge16 silver badges15 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Mitch A Over a year ago

Great and thank you! Such a simple and obvious solution, embarrassed I didn't see it.

Juliano Castilho · Accepted Answer · 2015-04-16 20:03:05Z

0

If you want to use dynamic information on the input, you need to pass it through the array, and make a loop.

Here is a little example based on Dustin code:

var fieldArray = [ //replace by this.props.form.fields
    {
        fieldkey: 'Signs and Symptoms', 
        value: 'fever, rash', 
        type: 'text', 
        label: 'Notes'
    },
    {
        fieldkey: 'NotFeelingWell', 
        value: 'false',
        type: 'checkbox', 
        label: 'Not Feeling Well'
    },
];

var Fields = React.createClass({

    handleOnChange:function(e){
        var fieldKey = e.target.attributes['data-fieldname'].value;

        Actions.updateField({
            key: fieldKey, 
            value: e.target.value
        })
    },

    render() {
        var inputs = [];

        fieldArray.map(function(field) { //replace by this.props.form.fields
            inputs.push(
                <Input
                data-fieldname={field.fieldkey} 
                value={field.value}
                type={field.type} 
                label={field.label}
                onChange={this.handleOnChange} />
            );
        }.bind(this));

        return (
            <div className="row">
                {inputs}
            </div>
        );
    }

});

edited Apr 16, 2015 at 20:03

answered Apr 16, 2015 at 19:40

Juliano Castilho

92 bronze badges

1 Comment

Mitch A Over a year ago

Awarded Dustin the answer as he was first, but I upvoted yours.

Collectives™ on Stack Overflow

How to get a reference to target element inside a callback

2 Answers 2

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related