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

IT技术 javascript reactjs
2021-03-26 00:16:09

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

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

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

2个回答

我认为这种方式更容易：

    <Input type="text"
                value={range.name}
                onChange={(e) => this.changeRangeName(range.id, e)}
        ...
    onChange(id, e) {
        ...
    }
谢谢，我喜欢这样做，因为 1) 我的绑定在构造函数中 2) 它更具可读性。
2021-06-04 00:16:09
我同意这是非常可读的。但是这个实现在浏览器中给出了一个警告说：“一个组件正在改变一个不受控制的文本类型的输入来控制。输入元素不应该从不受控制切换到受控制（反之亦然）。决定是使用受控制还是不受控制的输入元素在组件的整个生命周期内。” 关于如何避免此警告的任何想法？
2021-06-20 00:16:09
缺点：每次渲染时都会创建此匿名函数的新实例，这可能是性能缺陷。你怎么认为？
2021-06-20 00:16:09
@Vic 从一些博客文章看来，应该在渲染函数中避免使用箭头函数和绑定。我发现很难确定何时，如果它在某些情况下有效。
2021-06-20 00:16:09

该event参数还通过了，但rangeId参数前置到参数列表，让你的changeRangeName方法看起来像

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

见Function.prototype.bind()

你救了我的一天！
2021-06-03 00:16:09
如何添加多个参数，例如 function (rageId, anotherValue, thirdValue, envent)
2021-06-09 00:16:09
其它你可能感兴趣的问题
上一篇如何重置 ReactJS 文件输入 下一篇如何为 JSXTransformer 正确包装几个 TD 标签？