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

您正在调用父组件中onChange的道具Child中定义的函数：

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

在Child onChange元素上的input点击处理程序中的onChange(this.props.id, this.props.value, event.target.checked)内拨打了这样的电话：

input

显然不会起作用。

将Child中的<input ... onChange={this.props.onChange} />元素更改为：

NA

只传递事件对象。

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

1 个答案: