React.js 中的点击处理程序在事件发生之前执行。我怎样才能阻止它？

Question

您也可以在此处执行脚本https://codepen.io/tznqeyiq/pen/vYKNwKb

class App extends React.Component {

  constructor(props) {

    super(props);

    this.state = {

      playStyle: '',

      playerOne: '',

      playerTwo: '',

      turn: 'one',

    };

    this.moveToNextPage = this.moveToNextPage.bind(this);

    this.onClickEventsForFirstPage = this.onClickEventsForFirstPage.bind(this);

    this.onClickEventsForSecondPage = this.onClickEventsForSecondPage.bind(this);

  }

  //// It all starts from here !!!!!!!!!!!!!!!!!!!1

  componentDidMount() {

    document.getElementById('start').style.display = 'flex';

    document.querySelector('#mainXOROdiv').style.display = 'none';

    document.querySelector('#playAreaMain').style.display = 'none';

    this.onClickEventsForFirstPage();

    this.onClickEventsForSecondPage();

  }

  /// componentDidMount is above !!!!!!!!!!!!!!!!!!!!

  /* event handlers for first page */

  onClickEventsForFirstPage() {

    var single = document.getElementById('single');

    single.addEventListener('click', () => {

      this.moveToNextPage(document.querySelector('#mainXOROdiv'));

      this.setState({

        playStyle: 'single'

      });

    });

    var double = document.getElementById('double');

    double.addEventListener('click', () => {

      this.moveToNextPage(document.querySelector('#mainXOROdiv'));

      this.setState({

        playStyle: 'double'

      });

    });

  }

  moveToNextPage(page) {

    document.getElementById('start').style.display = 'none';

    document.querySelector('#mainXOROdiv').style.display = 'none';

    document.querySelector('#playAreaMain').style.display = 'none';

    page.style.display = 'flex';

  }

  /* event handler for first page above

  event handler for second page below */

  onClickEventsForSecondPage() {

    var X = document.querySelector('#xInSpan');

    var O = document.querySelector('#oInSpan');

    var clickedBtn = '';

Answer 1

问题可能出在下面：      if(this.state.turn = 'one'){请尝试添加第二个 = 来修复它onClickEventsForBoxes=(e)=>{        if(e){          var a = event.target;          console.log(this.state.playerOne,this.state.playerTwo);          console.log(this.state.turn);          if(this.state.turn == 'one'){            this.setState({turn:'two'});            a.innerText = this.state.playerOne;          } else {            this.setState({turn:'one'});            a.innerText = this.state.playerTwo;          }        }      }