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

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

[
{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({
更改：功能（e）{
Actions.updateField（{key:e.target.attributes['data-fieldname'].value，value:e.target.value}）
},
setValue:function（）{
var ref=//获取对触发此调用的DOM元素的引用
ref.value=this.props.form.fields[ref.attributes['data-fieldname']]
},
render:function（）{
返回(
)
}

})

我的目标是使用相同的两个函数从存储中写入/读取所有输入，并且不存在代码重复（即，我不想在每个输入中添加一个refs声明，以复制已存储在“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>)
}

render:function（）{
var输入=[]；
this.props.form.fields.map（函数（elem）{
push（）；
});
返回(
{inputs}
)
}

---

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

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

下面是一个基于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>
        );
    }

});

var fieldArray=[//替换为this.props.form.fields
{
现场钥匙：“症状和体征”，
值：'发烧，出疹'，
键入：“文本”，
标签：“注释”
},
{
现场钥匙：“NotFeelingWell”，
值：“false”，
键入：“复选框”，
标签：“感觉不舒服”
},
];
变量字段=React.createClass({
更改：功能（e）{
var fieldKey=e.target.attributes['data-fieldname'].value；
Actions.updateField({
钥匙：现场钥匙，
价值：即目标价值
})
},
render（）{
var输入=[]；
map（函数（字段）{//替换为this.props.form.fields
输入。推(
);
}.约束（这个）；
返回(
{inputs}
);
}
});

此时执行

this.setValue（）

时，与该调用关联的组件/元素甚至还不存在。这一点很好。您能推荐一种避免密钥重复的替代方法吗？将信息存储为对象数组（例如）并动态生成元素？非常好，谢谢！这么简单而明显的解决方案，让我尴尬的是，我没有看到它。我把答案授予达斯汀，因为他是第一个，但我投了你的票。

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

});