由于您已经在使用 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>
    ) 
}

您可以使用它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作为第一个参数接收

在我看来，你不应该声明函数，也不应该在渲染方法中绑定方法。这些都不是：

onClick={(e) => this.handleClick(e, item.id)}

onClick={this.handleClick.bind(this, item.id)}

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

去查看手册：https : //reactjs.org/docs/handling-events.html

而且我知道在最后两个示例中它确实在 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>
    );
  }
}

此语法的问题在于每次 LoggingButton 呈现时都会创建不同的回调。在大多数情况下，这很好。但是，如果此回调作为props传递给较低的组件，则这些组件可能会进行额外的重新渲染。我们通常建议在构造函数中绑定或使用类字段语法，以避免此类性能问题。

更好的解决方案

因此，如果您只需要传递一个值，请查看手册中的其他示例。基本上，您可以在构造函数中绑定该方法（或使用实验性语法来避免该步骤）。

constructor(props) {
  super(props);
  this.handleClick = this.handleClick.bind(this);
}

您将如何获得您想要获得的id/value？看这个例子：

class App extends React.Component {
  constructor(props) {
    super(props);
    this.handleClick = this.handleClick.bind(this);
  }

  handleClick({currentTarget}) {    
    console.log(currentTarget.value) // e.currentTarget.value would be equivalent
  }

  render() {
    return (
      <button value="here!" onClick={this.handleClick}>   
        Click me
      </button>
    );
  }
}

ReactDOM.render(
  <App />,
  document.getElementById('root')
);

body {
  padding: 5px;
  background-color: white;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

<div id="root"></div>

因此，如果您正在使用按钮或任何表单元素（接受一个值），您可以明确地考虑这种语法。

你可以这样做：

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

这是jsfiddle。

Mayid 是正确的，如果函数作为props传递给其他组件，则在渲染方法中声明或绑定函数是不好的。

不幸的是 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>
    );
  }
}