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

Question

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

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

})

我的目标是对商店中的 writing/reading 使用相同的两个函数来处理所有输入并且没有代码重复（即我不想向每个已经复制密钥的输入添加 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>)
}

这将始终在道具中显示您的数据。因此，当 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>
        );
    }

});

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

How to get a reference to target element inside a callback

javascript

reactjs