Question

我有两个初始状态：

element_array: [],
element_items: {
  element_type: "",
  element_name: ""
},

该表单接受输入并更新element_items的状态，然后使用以下命令将element_items连接到element_array：

const currentTypeElement = this.state.element_items
this.setState(function (currentState) {
  return {
    element_array: currentState.element_array.concat([currentTypeElement])
  }
});

这很好，因为我可以在表中映射element_array。但我也想在表格行中为每个element_array对象添加一个“编辑”按钮。所以我在组件中添加了一个函数：

handleElementEdit(prop) {
  ...
}

在我的render()方法中，

<table className="mb-0 table table-hover">
  <thead>
    <tr>
      <th>Element Type</th>
      <th>Element Name</th>
    </tr>
  </thead>
  <tbody>
    {this.state.element_array.map(function (prop, key) {
      return (
        <tr key={key}>
          <td>{prop.element_type}</td>
          <td>{prop.element_name}</td>
          <td>
            <button onClick={() => this.handleElementEdit(prop)}>Edit</button>
          </td>
        </tr>
      )}
    )}
  </tbody>
</table>

但是当我单击按钮时它显示错误

TypeError：无法读取未定义的属性“ handleElementEdit”。

onClick事件应将prop传递给handleElementEdit函数。

我不明白为什么会这样。请帮忙。

Answer 1

基本上，您在使用map函数时发生的情况是this的范围仅限于该map函数，并且this.handleElementEdit会尝试在map中查找该函数，并且由于它，它将引发错误。

您可以像使用箭头功能一样。

{this.state.element_array.map((prop, key)=> {
    return (
        <tr key={key}>
           <td>{prop.element_type}</td>
           <td>{prop.element_name}</td>
           <td>
               <button onClick={() => this.handleElementEdit(prop)}>
               Edit
               </button>
            </td>
        </tr>
     )
   })}

箭头功能将用于保留父类的范围。

另一个解决方案是，您可以将事件处理程序绑定到构造函数中，例如：

 constructor() {
    super();
    this.handleElementEdit = this.handleElementEdit.bind(this);
  }

您还可以使用下面提到的解决方案，例如将this范围存储在变量中并使用该变量绑定事件。

 let that=this;
  {this.state.element_array.map(function (prop, key)=> {
        return (
            <tr key={key}>
               <td>{prop.element_type}</td>
               <td>{prop.element_name}</td>
               <td>
                   <button onClick={() => that.handleElementEdit(prop)}>
                   Edit
                   </button>
                </td>
            </tr>
         )
       })}

如何将参数传递给map函数中的事件处理程序

1 个答案: