Json 如何在React中的for循环中包含onCLick？

我会尽我最大的努力使这个尽可能简洁

我希望能够从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>";
};
};

---

你应该绑定你的

SetUpItemsHandler（）

在你的编辑中，我看到你已经创建了一个函数listItems，但是你没有将它作为函数调用或者从中返回任何东西

    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>";
     }
    };

SetUpItemsHandler=（）=>{
var libraryKeys=Object.keys（this.props.library）；
document.getElementById（“libraryInner”）.innerHTML=“”；
对于（var i=0；i”+
名称：“+this.props.library[i]].Name+”+
“删除”
“”；
}
};

利用地图

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))
};

SetUpItemsHandler=（）=>{
Object.keys（this.props.library）.map（函数（keyValue，index）{
返回(

名称：{this.props.library[keyValue].Name}
删除

)
}.绑定（本）
};

您可以在渲染时调用此函数

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>
    );
  }

render（）{
返回(
这里是图书馆



{this.SetUpItemsHandler（）}

);
}

---

p.S.上述代码未经测试，您必须为我提供

this.props.library

的对象结构，以确保上述代码基于您实现for循环的方式。

用此替换渲染方法

    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>
        );
      }

render（）{
返回(
这里是图书馆



{(()=>{
让listItems=[]；
for（var i=0；i
名称：{this.props.library[i]].Name}
删除
）；
}
返回列表项；
})()}

);
}

您遇到了错误，因为您操作的是直接HTML，而它不知道如何使用bind。要使用bind，HTML应该使用react HTML元素生成。为什么不使用render方法呈现html呢？我用一个更新编辑了这篇文章，其中我在呈现函数中包含了函数。没花多少时间。如果没有任何控制台错误，则不会显示任何内容。请检查我的回答我试图在我的生成中包含您的方法。不幸的是没有运气。它触发一个错误：未捕获错误：找不到模块“/Library.js”（…）是Library.js您的文件名。如果是，则此错误是由于文件中的语法错误导致的，而不是其他原因。如果您正在使用webpack，那么在构建它时，它会显示语法错误指向的确切位置

    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>
        );
      }