如何在回调中获取对目标元素的引用

Question

我正在构建一个显示一系列通用输入字段的组件。 后备存储使用键值对的简单数组来管理数据：

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

为了消除许多与数据绑定相关的样板代码，该组件在生成HTML标记时使用这些相同的键（请参见“数据字段名称”属性）。

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>)
}

}）

我的目标是对所有输入使用相同的两个函数从存储中进行写入/读取，而无需代码重复（即，我不想向每个输入添加refs声明来复制已经存储在“数据字段名称”中的键）在附加到“ onChange”事件的回调上，事情进展顺利。 但是，我不确定如何在setValue函数中获取对有问题的DOM节点的引用。

提前致谢

Answer 1

我不确定我是否理解您的问题，但是为了减少样板，我将映射您的数组以生成输入字段：

 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>)
}

这将始终在道具中显示您的数据。 因此，当handleOnChange触发时，组件将使用新值重新呈现。 在我看来，这种方式比直接访问DOM节点更好。

Answer 2

如果要在输入上使用动态信息，则需要将其传递给数组，然后进行循环。

这是一个基于Dustin代码的小例子：

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>
        );
    }

});