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

Question

您也可以在此处执行脚本https://codepen.io/tznqeyiq/pen/vYKNwKbclass 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;

          }

        }

      }