javascript - 无法在 React 中将多个参数传递给 handleChange

Question

我正在使用 React 制作一个 list 。这是我的 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 组件的方式。以上是我到目前为止所写的内容。我收到错误无法读取未定义的属性 id。我希望得到有关如何解决此问题的帮助。

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

仅传递事件对象。