Question

我还在学习ReactJS，我遇到了这个障碍。我试图创造tic tac toe游戏。现在我希望游戏棋盘的每个单元都有一个名为'number'的不同道具，它将是元素的ID和一个显示ID的onclick处理程序。就目前而言，由于我仍在发展这个想法，只有一个元素得到了数字道具。现在我只是未定义我的代码如下所示：

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，因为有些人建议我这样做。此外，在这样做时，我想到了另一个概念，即我在Plansza3x3状态下创建了9个对象。每个对象都有自己的fieldNumber（这将是我想要显示的ID）。然后在div.parent里面渲染我想创建3个div.rows，每个div.cell包含3个div.cell。正如您所看到的，我尝试将包含div.cells信息的对象切成三个部分，将slice切成一个包含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;

如何在同一元素

2 个答案: