Question

我会尽最大努力保持尽可能简洁。

我希望能够从我的json数据状态（库）中删除项目，但是当我点击“删除”按钮时，我甚至无法触发一个简单的console.log。

每件东西都在装载时完美显示。我在onClick={this.deleteClickHandler.bind(this)}按钮的"Delete"事件中写入时出错。

父组件：

   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：无法读取属性'bind' 未定义的（...）

我是否正确包含了键值？我错过了什么？我已经将.map函数与数组一起使用，但我不确定使用json密钥对象的理想方法，所以我尝试使用for循环。这是错的吗？

非常感谢任何帮助。谢谢，萌

编辑：在我的渲染函数中，我试图包含但它没有占用，没有任何显示没有控制台中的任何错误：

  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()同样在你的编辑中我看到你创建了一个函数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 = () =>{

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

PS 以上代码未经过测试，您必须提供this.props.library的对象结构，以确保上述代码基于您如何实现for loop。

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

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

2 个答案: