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 = ''; X.addEventListener('click', () => { this.moveToNextPage(document.querySelector('#playAreaMain')); this.setState({ playerOne: 'X', playerTwo: 'O' }) }); O.addEventListener('click', () => { this.moveToNextPage(document.querySelector('#playAreaMain')); this.setState({ playerOne: 'O', playerTwo: 'X' }) }); } /*event handler for second page above */ 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; } } } render() { return ( < div id = "component" > < div id = "start" class = "centredivs" > < div class = "middledivs" > < h2 > Choose game type < /h2> < hr id = "horirow" / > < div class = 'deepestdivs' > < h3 id = "single" class = "firstheadings" > SINGLE < /h3> < h3 id = "double" class = "firstheadings" > DOUBLE < /h3> < /div> < /div> < /div> < div id = "mainXOROdiv" class = "centredivs" > < div class = "middledivs" > < h2 > Would you like to be an X or O < /h2> < div class = "deepestdivs" > < span class = "xoro" id = "xInSpan" > X < /span><span id="oInSpan" class="xoro">O</span > < /div> < /div> < /div> < div id = "playAreaMain" class = "centredivs" > < div id = 'innerplayarea' > { [1, 2, 3, 4, 5, 6, 7, 8, 9].map(data => ( < button id = { data } onClick = { this.onClickEventsForBoxes } class = "boxes" > < /button> )) } < /div> < /div> < /div> ); } } ReactDOM.render( < App / > , document.getElementById('app'));

 * { margin: 0; padding: 0; font-family: Arial, Helvetica, sans-serif; } #component { display: flex; align-items: center; justify-content: center; min-width: 60vh; width: 60vh; height: 60vh; background: rgba(150, 160, 120, 0.3); border-radius: 10%; box-shadow: 0 0px 5px 0.01px black; } .centredivs { max-width: 80%; width: 80%; height: 80%; background: rgba(150, 100, 125, 0.2); border-radius: 10%; box-shadow: inset 0 0 10px rgba(225, 225, 255, 0.7); display: none; flex-direction: column; align-items: center; justify-content: center; } .middledivs { max-height: 50%; height: 50%; width: 100%; display: flex; flex-direction: column; align-items: center; justify-content: space-around; } .deepestdivs { display: flex; justify-content: space-around; width: 80%; max-width: 80%; } /* first div css*/ #start { border: 0.5px solid rgba(0, 0, 0, 0.5); display: flex; } .firstheadings { background: rgba(0, 0, 0, 0.05); color: rgb(225, 225, 225); width: 155px; cursor: pointer; text-align: center; text-justify: center; } .firstheadings:hover { box-shadow: 0px 0px 5px black; } /* above: first div css */ /* second div css */ #mainXOROdiv { border: 0.8px solid rgba(0, 0, 0, 0.7); } .xoro { font-family: "Comic Sans MS", cursive, sans-serif; font-size: 60px; color: rgba(100, 100, 100, 0.7); cursor: pointer; } .xoro:hover { font-size: 66px; color: rgba(100, 100, 100, 0.9) } /* above: 2nd div css */ /* third div css */ #playAreaMain { border: 1px solid black; } #innerplayarea { width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; flex-wrap: wrap; } .boxes:nth-child(1) { border-top-left-radius: 20%; } .boxes:nth-child(3) { border-top-right-radius: 20%; } .boxes:nth-child(7) { border-bottom-left-radius: 20%; } .boxes:nth-child(9) { border-bottom-right-radius: 20%; } .boxes { box-shadow: inset 0px 0px 5px rgba(225, 225, 225, 0.3); margin: 0; width: 33.2%; height: 32.8%; font-size: 500%; color: rgba(0, 0, 0, 0.5); cursor: pointer; font-family: "Comic Sans MS", cursive, sans-serif; display: flex; align-items: center; justify-content: center; } /* above: 3rd div css */ #app { width: 100vw; height: 100vh; background: rgba(100, 100, 100, 0.2); display: flex; align-items: center; justify-content: center; } #horirow { width: 100%; } @media on screen (min-width: 400px) { #component { display: block; overflow: scroll; } }

 https://cdnjs.cloudflare.com/ajax/libs/react/16.13.1/umd/react.production.min.js https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.13.1/umd/react-dom.production.min.js <div id="app" class="container"> </div>

它實際上是使用 codepen.io 編寫的。

問題出在單擊事件偵聽器上的按鈕上。

                <button id={data} onClick={this.onClickEventsForBoxes} class="boxes"></button>

我想在我真正讓事件發生后執行這個。

它首先執行然后當我再次單擊該按鈕時它不執行它的作用。 它使用先前執行的草稿。

所以基本上我試圖在每次點擊按鈕時將 this.state.turn 值更改為玩家 1 和玩家 2。

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

但只有第一個 if 塊被執行，因為每個按鈕的事件處理程序都是相同的。 因此 state 中的值正在更改，但沒有反映在代碼中。

這是完整的代碼。

謝謝您的幫助

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();
    this.onClickEventsForBoxes();
  }
  /// 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 = '';
    X.addEventListener('click',()=>{
          this.moveToNextPage(document.querySelector('#playAreaMain'));
          this.setState({playerOne:'X',playerTwo:'O'})
    });
    O.addEventListener('click',()=>{
          this.moveToNextPage(document.querySelector('#playAreaMain'));
          this.setState({playerOne:'O',playerTwo:'X'})
    });
  }
  /*event handler for second page above */
  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;
      }
    }
  }
  render(){
    return(
     <div id="component">
        <div id="start" class="centredivs">
          <div class="middledivs">
            <h2>Choose game type</h2>
            <hr id="horirow"/>
            <div class='deepestdivs'>
              <h3 id="single" class="firstheadings">SINGLE</h3>
              <h3 id="double" class="firstheadings">DOUBLE</h3>
            </div>
          </div>
        </div>
        <div id="mainXOROdiv" class="centredivs">
          <div class="middledivs"> 
            <h2> Would you like to be an X or O</h2>
            <div class="deepestdivs">
            <span class="xoro" id="xInSpan">X</span><span id="oInSpan" class="xoro">O</span>
            </div>
          </div>
        </div>
        <div id="playAreaMain" class="centredivs">
          <div id='innerplayarea'> 
            {
              [1,2,3,4,5,6,7,8,9].map(data=>(
                <button id={data} onClick={this.onClickEventsForBoxes} class="boxes"></button>
              ))
            }
          </div>
        </div>  
     </div>
    );
  }
}  
ReactDOM.render(<App/>,document.getElementById('app'));

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