小编典典

通过onChange事件传递附加参数

reactjs

我正在尝试做的是:

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

当前有效:

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

handleChange(event) {

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

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

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

在儿童班,我有:

<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>

这很好。

我正在尝试做的是:

我试图将section参数添加到handleChange函数,如下所示:

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

在儿童班,我有:

<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参数设为可选。如果是这样,有没有简单的方法可以做到这一点?如果事件参数需要最后一个,这似乎是不可能的。


阅读 1520

收藏
2020-07-22

共1个答案

小编典典

在编写此代码时:

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

handleChange 触发渲染后立即调用。

而是这样做:

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

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

2020-07-22