Question

我正在使用React中的 Tic Tac Toe （没有JSX），我到了需要学习如何使用 onClick 的地方，这样当一个单元格单击单元格中将出现“X”。

经过研究，由于React的所有语法差异，我还没有完全弄明白。

如何更新我的代码，以便X会出现在单击的单元格中？

const e = React.createElement;

function cell(props) {
  return e('div', { className: "cell", 
                   id: props.number, 
                   // onClick: someFunctionThatWillAddX
                  }, 
           // props.cellValue
          )
}

let cells = [];
for(i=1; i<= 9; i++){
  cells.push(e(cell, { number: i, cellValue: i}, ))
}

const grid = e('div', { className: 'grid'}, cells);

const container = e('div', { className: 'container'}, grid);

ReactDOM.render(container, document.getElementById('app'))

.container {
  background: black;
  display: inline-block;
  border: 5px solid black;
}

.grid {
  display: grid;
  grid-template-columns: repeat(3, 80px);
  grid-template-rows: repeat(3, 80px);
  grid-gap: 5px;
}

.cell {
   /* center the cell content */
  justify-content: center;
  align-items: center;
  display: flex;
  font-family: Arial;
  font-size: 3rem;
  font-weight: bold;
  background: white;
}

<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>

Answer 1

当我说你需要state时，我的意思是你在描述“状态”。存在一个状态，其中单元格为空，并指出单元格包含文本X的状态。

在React中，我们的想法是每次状态更改时都应调用render。这意味着您要跟踪自己的状态并自己再次致电ReactDOM.render或者您使用React的内部状态管理，React将代表您致电ReactDOM.render。

说后一种策略更受欢迎是一种巨大的轻描淡写（呵呵，双关语并非意图）所以让我们来看看。

步骤1）

创建有状态组件：

class Cell extends React.Component {
  constructor() {
    super()
    this.state = { clicked: false } // set initial state
  }
  render() {
    return React.createElement(
      'div', 
      { 
        className: "cell", 
        // on click calls setState and flips the `clicked` state
        onClick: () => this.setState({ 
          clicked: !this.state.clicked
        })
      },
      // set the children value based on the current state
      this.state.clicked ? 'X' : '' 
    )
  }
}

第2步）当你在上面cell时执行完全相同的事情，但它现在被称为Cell（大写）你已经完成了！

this.setState是一个特殊的函数，它会通过扩展React.Component（class Foo extends React.Component）添加到您的类组件中，并且每当状态更改时，React都会为您更新视图。< / p>

希望有所帮助

Answer 2

试一试。用以下内容替换'someFunctionThatWillAddX'：

onClick: function(e) {
  e.target.innerHTML = "X";
}

React onClick将X添加到单元格

2 个答案: