Question

我有一个问题，如何使用React将函数传递给子组件中列表的每个项目。现在我在Child中有一个数字列表。点击其中一些应更改Parent中的状态和'focused'= clicked value。请解释它应该如何运作。

var App = React.createClass({
    getInitialState: function(){
      return {focused : 'nil'}
    },
    clickHandler: function(e){
      this.setState({focused: e});
    },
    render: function(){
      return(
        <div className = 'app'>
          <Child data = {['1', '2', '3']} handler = {this.clickHandler} />
          {this.state.focused}
        </div>
      );
    }
  });
  var Child = React.createClass({
    clickHandler: function(e){
      {this.props.handler(e)}
    },
    render: function(){
      var self = this;
      var list = this.props.data.map(function(item, index){
        return <li key = {index} onClick = {self.clickHandler}>{item}</li>
      });
      return(
        <ul className = 'child'>
          {list}
        </ul>
      );
    }
  });

Answer 1

将您的商品绑定到点击处理程序

 var Child = React.createClass({
        clickHandler: function(e){
          {this.props.handler(e)}
        },
        render: function(){
          var self = this;
          var list = this.props.data.map(function(item, index){
            return <li key = {index} onClick = {self.clickHandler.bind(null,item}>{item}</li>
          });
          return(
            <ul className = 'child'>
              {list}
            </ul>
          );
        }
      });

将功能传递给孩子的列表项

1 个答案: