React.js घटनाओं को

Question

निष्पादित करने के लिए 2 क्लिक की आवश्यकता है। मैं React.js द्वारा जीवन का खेल बना रहा हूं और मैं एक असुविधाजनक स्थिति में फंस गया हूं: प्रत्येक ईवेंट जिसे मैंने onClick={ event } के रूप में सेट किया है, निष्पादित करने के लिए 2 क्लिक की आवश्यकता है।

मुझे का वर्णन अधिक करते हैं: आप नीचे मेरी कोड में देख सकते हैं, मैं 2 बटन (है एक बटन 10 x 10 करने के लिए बोर्ड का आकार बदलने के लिए है, एक दूसरे की गति बदल रहा है अंतराल)।

सब ठीक है, सिवाय इसके कि जब मैं इन दो बटनों पर क्लिक करता हूं, तो मुझे निष्पादित करने के लिए डबल क्लिक करने की आवश्यकता होती है। क्रोम में रिएक्ट डेवलपर टूल के साथ पहले क्लिक पर, मैं देख सकता हूं कि width, height, speed सहित राज्य बदल दिए गए हैं, लेकिन राज्य board अभी भी अपरिवर्तित बनी हुई है। केवल दूसरे क्लिक के बाद, board स्थिति बदल दी गई है।

कोई भी समझा सकता है कि मुझे कैसे ठीक करना है और दिखाएं? आप

धन्यवाद यहाँ मेरी कोड

var GameBoard = React.createClass({ 
    getInitialState: function() { 
     return { 
      width: 10, 
      height: 10, 
      board: [], 
      speed: 1000, 
     }; 
    }, 

    // clear the board to the initial state 
    clear: function(width, height) { 
     this.setState({ 
      width: width, 
      height: height, 
     }); 
     this.setSize(); 
     clearInterval(this.game); 
    }, 

    // set the size of the board 
    setSize: function() { 
     var board = []; 
     for (var i = 0; i < this.state.height; ++i) { 
      var line = []; 
      for (var j = 0; j < this.state.width; ++j) 
       line.push(0); 
      board.push(line); 
     } 
     this.setState({ 
      board: board 
     }); 
    }, 

    // start the game 
    start: function() { 
     this.game = setInterval(this.gameOfLife, this.state.speed); 
    }, 

    gameOfLife: function() { // game of life }, 

    // change the speed of the game 
    changeSpeed: function(speed) { 
     this.setState({ speed: speed }); 
     clearInterval(this.game); 
     this.start(); 
    }, 

    // change the size to 10 x 10 
    smallSize: function() { 
     this.clear(10, 10); 
    }, 

    render: function() { 
     return (
      <div className="game-board"> 
       <h1>Conway's Game of Life</h1> 
       <h2>Generation: { this.state.generation }</h2> 
       <div className="control"> 
        <button className="btn btn-default" onClick={ this.start }>Start</button> 

       </div> 

       <Environment board={ this.state.board } onChangeSquare = { this.onChangeSquare }/> 

       <div className="size"> 
        <h2>Size</h2> 
        <button className="btn btn-default" onClick={ this.smallSize }>Small (10 x 10)</button> 
       </div> 

       <div className="speed"> 
        <h2>Speed</h2> 
        <button className="btn btn-default" onClick={ this.changeSpeed.bind(this, 900) }>Slow</button> 
       </div> 
      </div> 
     ) 
    } 
}); 

Answer 1

का एक हिस्सा कारण है कि एक घटक के राज्य तुरंत परिवर्तन नहीं करता है।

स्पष्ट() विधि में आप चौड़ाई और ऊंचाई स्थिति निर्धारित करते हैं। लेकिन आंतरिक रूप से जब वे setSize() विधि पर प्रतिक्रिया करते हैं तो उन्हें तुरंत अपडेट नहीं किया जाएगा। वे तभी अपडेट किए जाएंगे जब वे रेंडर विधि तक पहुंच जाएंगे।

जब आप बटन पर क्लिक करते हैं तो दूसरी बार राज्यों को ठीक से अपडेट किया गया होता। यही कारण है कि यह दूसरे उदाहरण में काम करता है।

एक समाधान कृपया चौड़ाई और ऊंचाई न रखें क्योंकि राज्य इसे प्रोप में उपयोग करता है। 10 * 10 को एक सेपेरेट डिफ़ॉल्ट प्रोप के रूप में रखें और इसे सेटसाइज़ विधि में उपयोग करें।