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

Z时代
2024-01-10
分类：问答

我正在构建一个显示一系列通用输入字段的组件。后备存储器使用键 - 值对的一个简单的数组来管理数据：如何在回调中获取对目标元素的引用

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

为了消除了大量的样板代码相关的数据绑定，从而产生的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>) 
}

}）

我的目标是使用相同的两个函数写入/从存储器读取所有输入和不重复的代码（即我不想一个裁判声明添加到每个输入，它复制已存储在'data-fieldname'中的密钥）事情在附加到'onChange'事件的回调上游泳。但是，我不确定如何在setValue函数中获取对所讨论的DOM节点的引用。

在此先感谢

回答：

我不知道如果我理解你的问题的权利，但要减少样板我会映射你的阵列产生输入字段：

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节点要好。

回答：

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

这里是基于达斯汀代码一点例如：

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