通过点击react.js传递id

Question

下面是我的部分代码,但我的问题非常简单,当用户点击时,我如何得到data-id ="1"到我的函数li？

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

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

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作为第一个参数接收

Answer 3

你可以这样做:

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.

Answer 4

我认为，您不应声明函数，也不应在render方法中绑定方法。这些都不是：

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呈现时，都会创建一个不同的回调。在大多数情况下，这很好。但是，如果将此回调作为对较低组件的支持传递，则这些组件可能会进行额外的重新渲染。我们通常建议在构造函数中绑定或使用类字段语法，以避免此类性能问题。

更好的解决方案

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

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

以及如何获取要获取的ID /值？请参阅以下示例：

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

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

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

因此，如果您正在使用按钮或任何表单元素（接受value），则可以肯定地考虑这种语法。