reactjs - 使用 onChange 事件传递附加参数

Question

我正在尝试做什么:

我正在尝试将字符串从子组件传递到父组件的handleChange 函数。

目前有效的方法:

我有一个带有以下方法的父 React JS 类:

handleChange(event) {

    console.log(event.target.value);
}

在渲染函数中，我有以下内容:

<Child handleChange={this.handleChange.bind(this)} />

在 Child 类中，我有:

<fieldset onChange={this.props.handleChange}>
    <div>Tag 1: <input id="tag1" value={tags[0]} /></div>
    <div>Tag 2: <input id="tag2" value={tags[1]} /></div>
    <div>Tag 3: <input id="tag3" value={tags[2]} /></div>
</fieldset>

这很好用。

我想做的事情:

我正在尝试向handleChange函数添加一个section参数，如下所示:

handleChange(section, event) {
    console.log(section);
    console.log(event.target.value);
}

在 Child 类中我有:

<fieldset onChange={this.props.handleChange("tags")}>
    <div>Tag 1: <input id="tag1" value={tags[0]} /></div>
    <div>Tag 2: <input id="tag2" value={tags[1]} /></div>
    <div>Tag 3: <input id="tag3" value={tags[2]} /></div>
</fieldset>

我现在收到错误:

Uncaught TypeError: Cannot read property 'target' of undefined

我的第二个 console.log 语句中抛出此错误。

我做错了什么？

此外，我正在考虑将 section 参数设置为可选。如果是这样，有没有一种简单的方法可以做到这一点？看来如果事件参数需要放在最后可能是不可能的。

Answer 1

当你写这篇文章时:

<fieldset onChange={this.props.handleChange("tags")}>

handleChange 将在触发渲染后立即调用。

相反，这样做:

<fieldset onChange={(e) => this.props.handleChange("tags", e)}>

现在，当调用 onChange 处理程序时，将调用 handleChange。