无法将多个参数传递给 React 中的 handleChange

Question

我正在使用 React 制作清单。这是我的 Parent 组件：

<ul>
{this.props.data.map(item => {
      return(
      <div><Child {...item} onChange={(e) => this.handleChange("Hello", e)}/></div>);
      })}
</ul>

调用 Child 打印列表元素的组件：

<li>
   <input
      type="checkbox"
      value={this.props.value}
      onChange={event => this.props.onChange(this.props.id, this.props.value, event.target.checked)}
   />
      {this.props.value}
   </li>

这里是 handleChange 方法：

handleChange(myString, e) {
    console.log(e.target.id, e.target.value, e.target.checked, myString);
  }

我想将我自己的自定义字符串传递给 handleChange 方法，但我做不到。我看过几篇关于这个主题的帖子，但我需要帮助来纠正我做错的事情。问题似乎是我将 onChange 数据从 Child 组件发送回 Parent 组件的方式。以上是我到目前为止所写的。我收到错误 Cannot read property id of undefined。对于如何解决此问题，我将不胜感激。

Answer 1

您正在调用父组件中 Child 的 props onChange 中这样定义的函数：

(e) => this.handleChange("Hello", e)

在 input 元素上的 onChange clickhandler 中的 Child 中调用类似这样的调用：

onChange(this.props.id, this.props.value, event.target.checked)

那显然行不通。

将 Child 中的 input 元素更改为：

<input
      ...
      onChange={this.props.onChange}
   />

只传递事件对象。

无法将多个参数传递给 React 中的 handleChange

Unable to pass multiple arguments to handleChange in React

javascript

onchange

reactjs