javascript-如何将多个参数传递给输入的onChange手

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

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

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

Piotr Perak asked 2020-07-09T10:12:55Z
2个解决方案
72 votes

我认为这样比较容易:

    <Input type="text"
                value={range.name}
                onChange={(e) => this.changeRangeName(range.id, e)}
        ...
    onChange(id, e) {
        ...
    }
EgorTitov answered 2020-07-09T10:13:57Z
38 votes

event参数仍然传递,但是rangeId参数位于参数列表的前面,因此您的changeRangeName方法看起来像

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

参见Function.prototype.bind()

Alexandre Kirszenberg answered 2020-07-09T10:13:37Z
translate from https://stackoverflow.com:/questions/29099610/how-to-pass-multiple-parameters-to-inputs-onchange-handler