Question

你能告诉我如何绑定list的click事件。如何在列表的click句柄上发送对象。这是我的代码。 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> =＆gt; return <li onClick={this.btnClick}>{item.hse}</li>定义您要处理的事件。
{this.state.data.map(function(item) =＆gt; {this.state.data.map((item) => {要有正确的this上下文。

如何使用react获取列表上的click事件？

1 个答案: