javascript - 如何定位 DOM 中的下一个 event.target？

Question

我正在尝试在 React 中做一个 tic-tac-toe 游戏来学习框架基础知识，我想知道如何让机器在调用我的初始函数后更改“以下”event.target 的 textContent:

onClickCardUser = (event) => {

        event.preventDefault();
        event.stopPropagation();

        event.target.textContent = 'X';

        //this.onClickCardMachine()
}

我所做的只是在用户单击的卡片上放置一个“X”。因此，一旦写入“x”，我接下来要做的就是调用 onClickCardMachine 函数，以便它可以在下一张卡片上放置一个“O”。

如何做到这一点？我对这个解决方案是否让我非常接近做井字游戏并不特别感兴趣，但我只是很好奇是否可以做到这一点。

export default class Box extends React.Component {

    onClickFichaUser = (event) => {

            event.preventDefault();
            event.stopPropagation();

            event.target.textContent = 'X';

            this.onClickFichaMachine()
    }

    onClickFichaMachine = () => {

        console.log('now machine should do an "O" ')
    }

    render() {
        return (
            <div className="box">
                <Card id={1} onClick={this.onClickFichaUser} />
                <Card id={2} onClick={this.onClickFichaUser} />
                <Card id={3} onClick={this.onClickFichaUser} />

                <Card id={4} onClick={this.onClickFichaUser} />
                <Card id={5} onClick={this.onClickFichaUser} />
                <Card id={6} onClick={this.onClickFichaUser} />

                <Card id={7} onClick={this.onClickFichaUser} />
                <Card id={8} onClick={this.onClickFichaUser} />
                <Card id={9} onClick={this.onClickFichaUser} />
            </div>
        )
    }
}

子元素:

export default class Card extends React.Component{

    render(){
        return (
            <div>
                <button id={this.props.id} onClick={this.props.onClick} className="card">{this.props.dibujo}</button>
            </div>
        )
    }
}

Answer 1

您应该跟踪当前玩家是谁(机器或用户)。您可以通过使用组件状态来做到这一点。这是一个例子:

class Card extends React.Component {

  render() {
    return (<div>
      <button id={this.props.id} onClick={this.props.onClick} className="card">{this.props.dibujo}</button>
    </div>)
  }
}

class Box extends React.Component {

  state = {
    player: 'user'
  }

  onClickFichaUser = (event) => {
    event.preventDefault();
    event.stopPropagation();
    event.target.disabled = true;
    event.target.textContent = this.state.player === 'user'
      ? 'X'
      : 'O';

    this.setState(state => ({
      player: state.player === 'user'
        ? 'machine'
        : 'user'
    }))
  }

  render() {
    return (<div className="box">
      <Card id={1} onClick={this.onClickFichaUser}/>
      <Card id={2} onClick={this.onClickFichaUser}/>
      <Card id={3} onClick={this.onClickFichaUser}/>

      <Card id={4} onClick={this.onClickFichaUser}/>
      <Card id={5} onClick={this.onClickFichaUser}/>
      <Card id={6} onClick={this.onClickFichaUser}/>

      <Card id={7} onClick={this.onClickFichaUser}/>
      <Card id={8} onClick={this.onClickFichaUser}/>
      <Card id={9} onClick={this.onClickFichaUser}/>
    </div>)
  }
}

ReactDOM.render(< Box />, document.getElementById('root'));

.box {
  display: grid;
  grid-template-columns: repeat(3, 100px);
  grid-template-rows: repeat(3, 100px);
  grid-gap: 10px;
}

.box div {
  background-color: dodgerblue;
  display: flex;
  align-items: center;
  justify-content: center;
}

.box div button {
  width: 50%;
  height: 50%;
  cursor: pointer;
}

<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<div id="root"></div>