javascript - 如何使用 react 在列表上获取点击事件？

Question

你能告诉我如何绑定(bind)列表的点击事件吗？如何在 React 的列表点击句柄上发送对象。这是我的代码。 http://codepen.io/naveennsit/pen/yOWRqB

class App extends React.Component{
  constructor(){
     super();
    this.state ={data: [{hse:'asd'},{hse:'adas'}]};
    this.btnClick = this.btnClick.bind(this)
  }

  componentDidMount(){
    this.loadFromServer();
    //alert('--')
  }
  loadFromServer(){
   //alert('000000')
    $.ajax({
      url: "http://mysafeinfo.com/api/data?list=englishmonarchs&format=json",
      dataType: 'json',
      success: (data) => {
        console.log("=======");
        console.log(data);
        this.setState({data: data});
      },
      error: (xhr, status, err) => {
        console.error(xhr);
      }
    });
  }

  btnClick(obj){
    alert('---'+obj)
    this.setState({data: 'nannsd'});
   //  this.state ={data: 'sds'};
  }

  render(){
    return <ul>
      {this.state.data.map(function(item) {
        console.log('---')
        return <li {this.btnClick}>{item.hse}</li>;
      })}
    </ul>
  }

}

React.render(<App/>,document.getElementById('app'))

Answer 1

使用这段代码:

class App extends React.Component{
  constructor(){
     super();
    this.state ={data: [{hse:'asd'},{hse:'adas'}]};
    this.btnClick = this.btnClick.bind(this)
  }

  componentDidMount(){
    this.loadFromServer();
    //alert('--')
  }
  loadFromServer(){
   //alert('000000')
    $.ajax({
      url: "http://mysafeinfo.com/api/data?list=englishmonarchs&format=json",
      dataType: 'json',
      success: (data) => {
        console.log("=======");
        console.log(data);
        this.setState({data: data});
      },
      error: (xhr, status, err) => {
        console.error(xhr);
      }
    });
  }

  btnClick(obj){
    alert('---'+obj)
    this.setState({data: 'nannsd'});
   //  this.state ={data: 'sds'};
  }

  render(){
    return (
      <ul>
        {this.state.data.map((item) => {
          console.log('---')
          return <li onClick={this.btnClick}>{item.hse}</li>;
        })}
      </ul>
    );
  }

}

React.render(<App/>,document.getElementById('app'))

所以 2 个变化:

• return <li {this.btnClick}>{item.hse}</li> => return <li onClick={this.btnClick}>{item.hse}</li>定义您要处理的事件。

• {this.state.data.map(function(item) => {this.state.data.map((item) => {有正确的this上下文。