我在数组中呈现对象输入元素的集合。
render: function() { var ranges = []; this.props.ranges.map(function(range, index) { var rangeElement = <Input type="text" value={range.name} onChange={this.changeRangeName.bind(this)} /> ranges.push(rangeElement); }, this); // render ranges }
这使我可以编写onChange处理函数:
changeRangeName: function (event) { var newName = event.target.value; },
但是在此处理程序中,我需要更改的范围对象的ID。因此,我可以更改更改在渲染函数中创建输入元素的方式并更改:
var rangeElement = <Input type="text" value={range.name} onChange={this.changeRangeName.bind(this, range.id)} />
现在,我的处理程序将接收range.id作为参数,但是现在我没有newName值。我可以使用裁判获得它
var rangeElement = <Input type="text" ref={'range' + range.id} value={range.name} onChange={this.changeRangeName.bind(this, range.id)} />
这是我知道的唯一解决方案,但我怀疑有更好的解决方案。
该event参数还通过了,但rangeId参数前置到参数列表,让你的changeRangeName方法看起来像
event
rangeId
changeRangeName
changeRangeName: function (rangeId, event) { var newName = event.target.value; },
参见Function.prototype.bind()