Question

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

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

为了消除大量与数据绑定相关的样板代码，组件在生成HTML标记时使用这些相同的键（请参阅＆＃39; data-fieldname＆＃39;属性）。

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声明，复制已经存储的密钥＆＃39; data-fieldname＆＃39;）事情在附加到＆＃39; onChange＆＃39;事件。但是，我不确定如何在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>
        );
    }

});

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

2 个答案: