通过单击 react.js 传递 id

Question

下面是我的部分代码，但我的问题很简单，当用户单击 li 时，我如何才能对我的函数说 data-id=“1” ？

 render(){
    return(
      <ul id="todo">
      {this.state.items.map((item,i) =>
        <li className='list-group-item' key={i} data-id={item.id}>{item.name}
        <button onClick={//how to pass item.id to my function?}>X</button>
        </li>
      )}
      </ul>
    )
  }

原文由 Thian Kian Phin 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

由于您已经在使用 ES6 - 在这里使用 箭头 函数可能会更简洁一些：

 render(){
    return(
      <ul id="todo">
      {this.state.items.map((item,i) =>
        <li className='list-group-item' key={i} data-id={item.id}>{item.name}
        <button onClick={() => this.yourfunc(item.id)}>X</button>
        </li>
      )}
      </ul>
    )
}

原文由 syllabix 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

您可以使用 bind() 来执行此操作。

 render(){
    return(
      <ul id="todo">
      {this.state.items.map((item,i) =>
        <li className='list-group-item' key={i} data-id={item.id}>{item.name}
        <button onClick={yourfunc.bind(this, item.id)}>X</button>
        </li>
      )}
      </ul>
    )
  }

您的函数将接收 item.id 作为第一个参数

原文由 Pranesh Ravi 发布，翻译遵循 CC BY-SA 3.0 许可协议