Javascript 单击react.js传递id

下面是我的部分代码，但我的问题很简单，当用户单击

li

时，如何才能将数据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>
    ) 
  }

render（）{
返回(

{this.state.items.map（（item，i）=>
{item.name}
X

)}

) 
}

您可以使用

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

render（）{
返回(

{this.state.items.map（（item，i）=>
{item.name}
X

)}

) 
}

---

您的函数将收到

item.id

作为第一个参数

，因为您已经在使用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>
    ) 
}

render（）{
返回(

{this.state.items.map（（item，i）=>
{item.name}
this.yourfunc（item.id）}>X

)}

) 
}

下面是一个运行示例

类应用程序扩展了React.Component{
建造师（道具）{
超级（道具）；
此.state={
项目：[{
id:0，
名称：“买牛奶”
}, {
id:1，
名称：“编写单元测试”
}, {
id:2，
名字：“做饭”
}]
}
this.handleClick=this.handleClick.bind（this）；
}
handleClick（值）{
log（`${value}单击`）；
}
renderTodos（）{
返回此.state.items.map（（item，idx）=>{
返回（
 {
item.name
}this.handleClick（item.id）
}>X

)
})
}
render（）{
返回（
{
this.renderTodos（）
}
) 
}
}
ReactDOM.render(
,
document.getElementById（'react\u example'）
);
您可以按如下方式执行此操作：

class Test extends React.Component {
    constructor(props){
         super(props);
         this.state = {
            items: [
                {item: "item", id: 1},
                {item1: "item1", id: 2}
            ]
         }
    }

    handleClick(id, e){
        alert(id);
    }

    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.handleClick.bind(this, item.id)}>X</button>
                    </li>
               )}
           </ul>
        ) 
   }
}

React.render(<Test />, document.getElementById('container'));

类测试扩展了React.Component{
建造师（道具）{
超级（道具）；
此.state={
项目：[
{项目：“项目”，id:1}，
{item1:“item1”，id:2}
]
}
}
handleClick（id，e）{
警报（id）；
}
render（）{
返回(

{this.state.items.map（（item，i）=>
{item.name}
X

)}

) 
}
}
React.render（，document.getElementById（'container'）；

以下是。
在我看来，您不应该在render方法中声明函数，也不应该绑定方法。这两项都不是：

onClick={（e）=>this.handleClick（e，item.id）}

onClick={this.handleClick.bind（this，item.id）}

我知道有很多教程展示了这种语法。但也有相当多的博客帖子警告为什么这不是一个好主意。基本上，在每个渲染上创建一个新函数

去查阅手册：

我知道在最后两个例子中，它确实在render上创建了函数。但react手册也显示了此示例，并说明：

class LoggingButton extends React.Component {
  handleClick() {
    console.log('this is:', this);
  }

  render() {
    // This syntax ensures `this` is bound within handleClick
    return (
      <button onClick={(e) => this.handleClick(e)}>
        Click me
      </button>
    );
  }
}

您将如何获得您试图获得的id/值？请参见此示例：


类应用程序扩展了React.Component{
建造师（道具）{
超级（道具）；
this.handleClick=this.handleClick.bind（this）；
}
handleClick（{currentTarget}）{
console.log（currentTarget.value）//e.currentTarget.value将是等效的
}
render（）{
返回(
点击我
);
}
}
ReactDOM.render(
,
document.getElementById（'root'））
);
正文{
填充物：5px；
背景色：白色；
}


Mayid是正确的，如果函数作为道具传递到其他组件中，则在render方法中声明或绑定函数是不好的

不幸的是，currentTarget对我不起作用

我使用了event.target的getAttribute函数。这不会导致不必要的重新加载

class App extends React.Component {
  handleClick = (event) => {    
    console.log(event.target.getAttribute('index'))
  }

  render() {
    return (
      <button index="1" onClick={this.handleClick}>   
        Click me
      </button>
    );
  }
}

类应用程序扩展了React.Component{
handleClick=（事件）=>{
console.log（event.target.getAttribute（'index'））
}
render（）{
返回(
点击我
);
}
}
wow不必使用bind吗？箭头函数中的this关键字指向函数本身？否。使用箭头函数时不必使用绑定。我不知道这件事，我在一个组件中使用函数只是为了从道具中触发一个函数并发送一些额外的参数，这让我自己很难受。。谢谢感谢您提供一个完整的工作反应组件示例来实现这一点。
class App extends React.Component {
  handleClick = (event) => {    
    console.log(event.target.getAttribute('index'))
  }

  render() {
    return (
      <button index="1" onClick={this.handleClick}>   
        Click me
      </button>
    );
  }
}