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

Question

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

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

为了消除大量与数据绑定(bind)相关的样板代码，组件在生成 HTML 标记时使用这些相同的键(请参阅“data-fieldname”属性)。

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 声明，以重复已存储在“data”中的键-fieldname') 在附加到“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>)
}

这将始终在 Prop 中显示您的数据。因此，当触发handleOnChange时，组件将使用新值重新渲染。我认为这种方式比直接访问 DOM 节点更好。