如何在同一个元素的onClick处理程序中显示HTML元素的属性

Question

我仍然在学习ReactJS，而我遇到了这个障碍。 我正在尝试创建井字游戏。 现在，我希望游戏板上的每个单元都有一个不同的道具，称为“数字”，该道具将是元素的ID，并带有一个显示该ID的onclick处理程序。 到目前为止，由于Im仍在发展这个想法，因此只有一个要素获得了数字道具。 现在，我只得到未定义的代码，如下所示：

var React = require('react');

var Plansza3x3 = React.createClass({
  toggleClick: function() {
    alert(this.props.number);
  },

  render: function() {

  return (
    <div className="parent">
    <div className="row">
      <div className="cell" number="3" onClick={this.toggleClick}></div>
      <div className="cell"></div>
      <div className="cell"></div>
    </div>
    <div className="row">
      <div className="cell"></div>
      <div className="cell"></div>
      <div className="cell"></div>
    </div>
    <div className="row">
      <div className="cell"></div>
      <div className="cell"></div>
      <div className="cell"></div>
    </div>
  </div>//parent
)//return
}//render
})//createClass

module.exports = Plansza3x3;

此外，我不确定确切的时间，但有时onclick会在渲染时触发自身。 有人可以解释为什么吗？

编辑：我已经尝试将我的代码转换为ES6，其中有些人建议我这样做。 另外，在这样做的时候，我想到了另一个概念，那就是我在Planzaza3x3状态下创建了9个对象。 每个对象都有自己的fieldNumber（这是我要显示的ID）。 然后在div.parent内部进行渲染时，我想创建3个div.rows，每个行将包含3个div.cell。 如您所见，我尝试将包含div.cells信息的对象切成三部分，然后将其切片成具有3个元素的数组，每个元素包含三个div.cells的数据。 然后，我想对所有这些对象进行映射，以便得到三行，每行三个单元格。 在渲染时，我收到一条错误消息，说有一个意外的标记，它指向for循环。 编码：

var style = require('./Plansza3x3.css');

var React = require('react');

class Plansza3x3 extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            boardGameFields: [
                {fieldNumber: 1},
                {fieldNumber: 2},
                {fieldNumber: 3},
                {fieldNumber: 4},
                {fieldNumber: 5},
                {fieldNumber: 6},
                {fieldNumber: 7},
                {fieldNumber: 8},
                {fieldNumber: 9}
            ]
        }
    }
    render () {
        return (
            <div className="parent">
                {
                    for(var i = 0; i = 2; i++) {
                        <div className="row">
                            {var currentRowFieldsArray = this.state.boardGameFields.slice(3*i, (3*i)+1, (3*i)+2);
                                currentRowFieldsArray.map(currentField =>
                                    <div className="cell" key={currentField.fieldNumber} fieldNumber={currentField.fieldNumber} onClick={e => alert(e.target.fieldNumber)}></div>
                                )//map
                            }
                        </div>//row
                    }//for
                }
            </div>//parent
        )//return
    }//render
}//class

export default Plansza3x3;

Answer 1

如果您没有将任何事件传递给onClick方法，则默认情况下将调用该方法。 为防止这种情况，您可以这样称呼它： onClick={e => this.toggleClick(e)}

现在，建议：使用ES6，它比旧版JS更适合React。

Answer 2

使用data-number代替number 。 考虑到data-number已被编码，您可以从e.target.getAttribute('data-number')类的事件中检索它

 var Plansza3x3 = React.createClass({ toggleClick: function(e) { console.log(e.target.getAttribute('data-number')); }, render: function() { return ( <div className="parent"> <div className="row"> <div className="cell" data-number="3" onClick={this.toggleClick}>1</div> <div className="cell">2</div> <div className="cell">3</div> </div> <div className="row"> <div className="cell">4</div> <div className="cell">5</div> <div className="cell">6</div> </div> <div className="row"> <div className="cell"></div> <div className="cell"></div> <div className="cell"></div> </div> </div> ) } }) ReactDOM.render(<Plansza3x3/>, document.getElementById('app')) 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script> <div id="app"></div> 

现在，假设您希望它是动态的，那么从父级获得的数字如下

在父母中：

number = [[1,2,3], [4,5,6], [7,8,9]];

<Plansza3x3 number={number}/>

在儿童中

var React = require('react');

var Plansza3x3 = React.createClass({
  toggleClick: function(row, cell) {
    alert(this.props.number[row][cell]);
  },

  render: function() {

  return (
    <div className="parent">
    {this.props.number.map((num, row) => {
         return <div className="row" key={row}>
                 {num.map((cell, cell) => {
                        return <div key={cell} className="cell" number={cell} onClick={this.toggleClick.bind(this, row, cell)}></div>

                 })}
    })}

  </div>//parent
)//return
}//render
})//createClass

module.exports = Plansza3x3;