如何将多个参数传递给输入的onChange处理程序 [英] How to pass multiple parameters to input's onChange handler

问题描述

我为数组中的对象渲染输入元素的集合。

I render collection of input elements for objects in array.

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处理函数：

this allows me to write onChange handler function:

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

但是在这个处理程序中我需要我要更改的范围对象的id。所以我可以改变更改如何在渲染函数中创建输入元素并更改：

but in this handler I need id of range object I want to change. So I could change change how I create input elements in render function and change:

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

现在我的处理程序将接收range.id作为参数，但现在我没有newName值。我可以使用refs来获取它

Now my handler will receive range.id as parameter but now I don't have the newName value. I can get it using refs

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

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

This is the only solution I know but I suspect there is better one.

推荐答案

事件参数仍然通过，但 rangeId 参数被添加到参数列表中，因此您的 changeRangeName 方法看起来像

The event argument is still passed, but the rangeId argument is prepended to the arguments list, so your changeRangeName method would look like

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

参见 Function.prototype.bind（）

这篇关于如何将多个参数传递给输入的onChange处理程序的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！