我如何在React中包含一个onCLick循环

Question

我会尽我最大的努力使这篇文章尽可能简洁。

我希望能够从我的json数据状态(库)中删除项目，但目前我甚至不能得到一个简单的console.log当"删除"按钮被点击时。

加载时所有东西都完美显示。当我在"Delete"按钮的onClick={this.deleteClickHandler.bind(this)}事件中写入时，我得到了一个错误。

父组件:

   constructor(){
  super();
  this.state = {
    test: "SiteFront State",
    library : {
      "copy" : {
        "name" : "Copy",
        "input" :  "CMD + C",
        "os" : "All"
      },
      "paste" : {
        "name" : "paste",
        "input" :  "CMD + V",
        "os" : "All"
      }
    },
    libraryKeys:null
  };
};

子组件:

componentDidMount(){
    this.SetUpItemsHandler();
};
componentWillReceiveProps(){
  this.SetUpItemsHandler();
}
deleteClickHandler(e){
  console.log("delete Button Clicked");
};
SetUpItemsHandler(){
  var libraryKeys = Object.keys(this.props.library);
  document.getElementById("libraryInner").innerHTML = "";
  for(var i = 0;i < libraryKeys.length;i++){
    document.getElementById("libraryInner").innerHTML += "<li key={i}>"+
      "<h2>Name: "+ this.props.library[libraryKeys[i]].name +"</h1>"+
      "<button onClick={this.deleteClickHandler.bind(this ,i)}>Delete</button>"
    "</li>";
};
};

The onClick={this.deleteClickHandler.bind(this)}事件在控制台中触发一个错误:

(index):16 Uncaught TypeError: Cannot read property 'bind' of未定义(…)

包含键值是否正确?我错过了什么?我已经使用。map函数与数组，但我不确定的理想方式来做它与json关键对象，所以我尝试使用一个for循环代替。这有错吗?

任何帮助都是非常感激的。谢谢你！Moe

编辑:在我的渲染函数中，我试图包括，但它没有采取，控制台没有显示任何错误:

  render(){
    var listItems = function(){
      var libraryKeys = Object.keys(this.props.library);
      document.getElementById("libraryInner").innerHTML = "";
      for(var i = 0;i < libraryKeys.length;i++){
        document.getElementById("libraryInner").innerHTML += "<li key={i}>"+
        "<h2>Name: "+ this.props.library[libraryKeys[i]].name +"</h1>"+
        "<button onClick={this.deleteClickHandler.bind(this)}>Delete</button>"+
        "</li>"
      };
  };
    return(
      <div>
        Library Here<br/><br/>
        <div id="library">
          <ul id="libraryInner">
            {listItems}
          </ul>
        </div>
      <AddItemForm
        inputUpdateHandler={this.props.inputUpdateHandler.bind(this)}
        nameInputUpdateHandler={this.props.nameInputUpdateHandler.bind(this)}
        inputInputUpdateHandler={this.props.inputInputUpdateHandler.bind(this)}
        osInputUpdateHandler={this.props.osInputUpdateHandler.bind(this)}
        addItemHandler={this.props.addItemHandler.bind(this)}
      />
      </div>
    );
  }

Answer 1

您应该绑定您的SetUpItemsHandler()在您的编辑中，我看到您已经创建了一个函数listtiitems，但您没有将其作为函数调用或从中返回任何东西。

    SetUpItemsHandler = () =>{
      var libraryKeys = Object.keys(this.props.library);
       document.getElementById("libraryInner").innerHTML = "";
       for(var i = 0;i < libraryKeys.length;i++){
           document.getElementById("libraryInner").innerHTML += "<li key={i}>"+
       "<h2>Name: "+ this.props.library[libraryKeys[i]].name +"</h1>"+
      "<button onClick={this.deleteClickHandler.bind(this ,i)}>Delete</button>"
    "</li>";
     }
    };

使用map

SetUpItemsHandler = () =>{
    Object.keys(this.props.library).map(function(keyValue, index){
      return (
        <li key={index}>
          <h2>Name: {this.props.library[keyValue].name}</h2>
          <button onClick={this.deleteClickHandler.bind(this, i)}>Delete</button>
        </li>
      )
    }.bind(this))
};

你可以在渲染中调用这个函数

render(){
    return(
      <div>
        Library Here<br/><br/>
        <div id="library">
          <ul id="libraryInner">
            {this.SetUpItemsHandler()}
          </ul>
        </div>
      <AddItemForm
        inputUpdateHandler={this.props.inputUpdateHandler.bind(this)}
        nameInputUpdateHandler={this.props.nameInputUpdateHandler.bind(this)}
        inputInputUpdateHandler={this.props.inputInputUpdateHandler.bind(this)}
        osInputUpdateHandler={this.props.osInputUpdateHandler.bind(this)}
        addItemHandler={this.props.addItemHandler.bind(this)}
      />
      </div>
    );
  }

注:上面的代码没有经过测试，你必须为我提供一个this.props.library的对象结构，以确保上面的代码是基于你如何实现for循环。

Answer 2

用这个替换你的渲染方法

    render(){
      return(
          <div>
            Library Here<br/><br/>
            <div id="library">
              <ul id="libraryInner">
                {(()=>{
                 let listItems = [];
                 for(var i = 0;i < Object.keys(this.props.library);i++){
                    listItems.push(<li key={i}>
                                      <h2>Name:{this.props.library[libraryKeys[i]].name} </h2>
                                      <button onClick={this.deleteClickHandler.bind(this)}>Delete</button>
                                   </li>);
                  }
                  return  listItems;    
                })()}
              </ul>
            </div>
          <AddItemForm
            inputUpdateHandler={this.props.inputUpdateHandler.bind(this)}
            nameInputUpdateHandler={this.props.nameInputUpdateHandler.bind(this)}
            inputInputUpdateHandler={this.props.inputInputUpdateHandler.bind(this)}
            osInputUpdateHandler={this.props.osInputUpdateHandler.bind(this)}
            addItemHandler={this.props.addItemHandler.bind(this)}
          />
          </div>
        );
      }