Question

我想制作简单的列表点击器。当用户点击列表项时，他的父应用程序组件创建或更新状态。在app状态中，我想要item.title和点击次数。但我堆栈，我不知道如何使这个handleClick方法。这是我的代码：

  var data = ['list-A','list-B','list-C'];

  var App = React.createClass({
    getInitialState: function() {
      return {items: []}    
    },

    handleClick: function(i,item){
      //after click on item set items state {item.title : numberOfClicks}
      console.log('You click on ' + item);
    },

     render: function(){
       var listItems = this.props.data.map(function(item,i){
         return <ListItem id={i} title={item} onClick={this.handleClick.bind(this,i,item)}/>
       }.bind(this));
       return (
         <div>
           <h2>List Items: </h2>
           <ul>
            {listItems}   
           </ul>
         </div>
       )
     }

  });

  var ListItem = React.createClass({
    render: function(){
      return <li onClick={this.props.onClick} key={this.props.id} >{this.props.title}</li>
    }
  });


  React.render(
    <App data = {data}/>,
    document.getElementById('App')
  );

Answer 1

从道具更新状态，每当更改内容时，使用更改的项创建一个新数组，并将其设置为状态（fiddle）：

  var data = [
    { title: 'list-A', clicks: 0 },
    { title: 'list-B', clicks: 0 },
    { title: 'list-C', clicks: 0 }
  ];

  var App = React.createClass({
    /** update state for the 1st time **/
    componentWillMount: function() {
      this.setState({
        items: this.props.data || []
      });
    },

        /** update state if the props changes **/
    componentWillReceiveProps: function(nextProps) {
      this.setState({
        items: nextProps.data
      });
    },

    handleClick: function(i,item){
      console.log('You click on ' + i);

      var items = this.state.items;

      var currentItem = this.state.items.slice(i, i + 1)[0];

      currentItem.clicks = currentItem.clicks + 1;

      // create a new state with the updated item
      this.setState({
        items: items.slice(0, i)
            .concat([currentItem])
          .concat(items.slice(i + 1))
      });
    },

     render: function(){
       var listItems = this.state.items.map(function(item,i){
         return <ListItem id={i} key={ i } title={item.title} clicks={item.clicks} onClick={this.handleClick.bind(this,i,item)}/>
       }.bind(this));
       return (
         <div>
           <h2>List Items: </h2>
           <ul>
            {listItems}   
           </ul>
         </div>
       )
     }

  });

  var ListItem = React.createClass({
    render: function(){
      return <li onClick={this.props.onClick} key={this.props.id} >{this.props.title} - {this.props.clicks}</li>
    }
  });

ReactDOM.render(
  <App data={ data } />,
  document.getElementById('container')
);

Answer 2

一种明确的方法是按照li定义函数，如下所示：

App = React.createClass({
  handleClick: function(value){
    this.setState({ selectedTitle: value });
    console.log('You click on ' + item);
  },

  render: function(){
    var listItems = this.props.data.map(function(item,i){
      return <ListItem id={i} title={item} onClick={this.handleClick}/>
  }
  ...
}

var ListItem = React.createClass({
  render: function(){
    return <li onClick={() => this.props.onClick(this.props.title)} key={this.props.id} >{this.props.title}</li>
  }
});

有没有办法处理点击项目并设置父状态？

2 个答案: