Question

我在http://codepen.io/AlexanderWeb00/pen/ZOWyNr

处有以下反应代码

我正在尝试为每个范围附加一个click事件，该事件允许console.log显示您点击的对应号码：

var one = [],
    two = [];

var SingleButton = React.createClass({
  getInitialState: function() {
    return {
      val1: one,
      val2: two,
      action: ''
    }  
  },
  handleClick: function() {
     var val1 = this.state.val1,
         val2 = this.state.val2;

    if(!$('.action').length){
      val1.push(this.props.numbers);
      console.log(val1[0].join(" "));
    }
  },
  render: function() {
    var numbers = [];
    var classes = 's-btn large-4 columns';
    var ff =this.handleClick;
    this.props.numbers.forEach(function(el){
      numbers.push(<span onClick={ff} className={classes}>{el}</span>);
    });
    return (
      <div className="row">
        {numbers}
      </div>
    );
  }
});

我得到的是123456789而不是5，如果我只点击数字5。

Answer 1

如评论中所述，您将整个数组推送到val1，因此它将始终显示整个列表。要解决这个问题，我们需要确定点击的跨度，获取其数量，并将其添加到列表中。

第一种方法是使用jQuery，以及onClick发送的eventArg。单击span后，将调用handleClick，并将click事件数据作为参数。我们将从事件arg中提取单击的span，即eventArg.target，并使用jQuery（即$(eventArg.target).text()）获取其文本。

要明确解决问题：

var one = [],
    two = [];

var SingleButton = React.createClass({
  getInitialState: function() {
    return {
      val1: one,
      val2: two,
      action: ''
    }  
  },
  handleClick: function(e) {
     var val1 = this.state.val1,
         val2 = this.state.val2;

    if(!$('.action').length){
      val1.push($(e.target).text());
      console.log(val1.join(" "));
    }
  },
  render: function() {
    var numbers = [];
    var classes = 's-btn large-4 columns';
    var ff =this.handleClick;
    this.props.numbers.forEach(function(el){
      numbers.push(<span onClick={ff} className={classes}>{el}</span>);
    });
    return (
      <div className="row">
        {numbers}
      </div>
    );
  }
});

https://jsfiddle.net/omerts/zm0bzmwp/

另一种选择是将span的数字包装在colsure中。换句话说，创建一个匿名函数，该函数将该数字作为其范围对象的一部分。由于闭包不在本问题的范围内，因此需要进一步阅读：Closures

var SingleButton = React.createClass({
  getInitialState: function() {
    return {
      val1: [],
      val2: [],
      action: ''
    }  
  },
  handleClick: function(number) {
    if(!$('.action').length){
      const updatedList = this.state.val1.slice(); // clone the array, and add the new number
      updatedList.push(number);
      console.log(updatedList.join(" "));
      this.setState({val1: updatedList});      
    }
  },
  render: function() {
    var numbers = [];
    var classes = 's-btn large-4 columns';

    this.props.numbers.forEach(function(el){    
      numbers.push(<span onClick={() => {this.handleClick(el)}} className={classes}>{el}</span>);
    }, this);

    return (
      <div className="row">
        {numbers}
      </div>
    );
  }
});

https://jsfiddle.net/omerts/590my903/

第二个选项更好，因为你不应该改变状态，除非你使用this.setState。如果你真的不需要它作为你的状态的一部分，只需要创建你的SingleButton的val1和val2数据记录。

React js在每个span元素上附加click事件

1 个答案: