如何将多个参数传递给输入的 onChange 处理程序

Question

我为数组中的对象呈现输入元素的集合。

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 值。我可以使用 refs

得到它

var rangeElement = <Input type="text"
            ref={'range' + range.id}
            value={range.name}
            onChange={this.changeRangeName.bind(this, range.id)} />

这是我知道的唯一解决方案，但我怀疑还有更好的解决方案。

Answer 1

event 参数仍然被传递，但是 rangeId 参数被添加到参数列表中，所以你的 changeRangeName 方法看起来像

changeRangeName: function (rangeId, event) {
    var newName = event.target.value;
},

见Function.prototype.bind()

Answer 2

我觉得这样比较简单：

    <Input type="text"
                value={range.name}
                onChange={(e) => this.changeRangeName(range.id, e)}
        ...
    onChange(id, e) {
        ...
    }

如何将多个参数传递给输入的 onChange 处理程序

How to pass multiple parameters to input's onChange handler

javascript

reactjs