通过onChange事件传递附加参数

  • Z时代
  • 2024-01-10
  • 分类：问答

我试图将字符串从子组件传递到父组件的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参数设为可选。如果是这样，有没有简单的方法可以做到这一点？如果事件参数需要最后一个，这似乎是不可能的。

回答：

在编写此代码时：

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

handleChange 触发渲染后立即调用。

而是这样做：

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

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

以上是 通过onChange事件传递附加参数 的全部内容， 来源链接： utcz.com/qa/433579.html

回到顶部