如何在回調中獲取對目標元素的引用

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

}）

我的目標是使用相同的兩個函數寫入/從存儲器讀取所有輸入和不重複的代碼（即我不想一個裁判聲明添加到每個輸入，它複製已存儲在'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

如果要在輸入上使用動態信息，則需要將其傳遞給數組，並進行循環。

這裏是基於達斯汀代碼一點例如：

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

});