我如何在从数组返回的每个组件中工作的按钮工作?Reactjs

Question

对不起，如果此问题以前已经回答。我尝试搜索它。我什至不确定要寻找答案的内容。我是React初学者，所以要感谢任何帮助。

在 listItems 变量中，我正在返回项目>项目 array中每个项目的组件，每个组件都带有一个按钮。我希望每个组件的按钮启动 HandlereMove 函数。目前，控制台发出了错误：" HandlereMove 未定义"。

var TaskListComponent = React.createClass({
  
  getInitialState : function(){
    return {
      items:["To do item 1","To do item 2","To do item 3"]
    };
  },
  handleRemove : function(){
    console.log("test")
  },
                                          
  render: function(){
    var listItems = this.state.items.map(function(item){
      return <li> {item} <button onClick={this.handleRemove}>X</button></li>;
    });
    return(
      <div>
        Child Container
        <ul>{listItems}</ul>
      </div>
    );
  }
});

最终我希望能够从数组中获取按钮以删除单击的相应项目。

任何帮助都非常感谢。

谢谢Moe

Answer 1

您要么需要将上下文传递到另一个答案中的地图方法，要么可以使用箭头函数而不是通常的函数。箭头功能将使您的上下文中具有处理方法。如果您将代码转换为：

var listItems = this.state.items.map((item,index) => {
      return <li key={index}> {item} <button onClick={this.handleRemove}>X</button></li>;
    });

它将按照您的期望工作。与通常的函数相比

正在发生的，因为.map中的功能不绑定到您的组件。

您可以将其绑定到将上下文作为第二个参数传递的组件。

var listItems = this.state.items.map(function(item,index){
      return <li key={index}> {item} <button onClick={this.handleRemove}>X</button></li>;
    },this);

另外，不要忘记为阵列中的每个孩子提供钥匙。

完整的工作示例