如何在reactjs中實現多步組件處理？

Question

我是新來的reactjs。在這裏，我已經爲reactjs實現了多步組件的以下代碼。有沒有其他的方法來實現下面的代碼結構？

var Getstarted = React.createClass({ 
    stepOne: function(){ 
     $('#div1').hide(); 
     $('#div2').fadeIn(); 
    }, 
    stepBackOne: function(){ 
     $('#div1').fadeIn(); 
     $('#div2').hide(); 
    }, 
    stepTwo: function(){ 
     $('#div2').hide(); 
     $('#div3').fadeIn(); 
    }, 
    render: function() { 
     return (
      <div className="text-center"> 
       <div id="div1"> 
        <h2>Step 1 content</h2> 
        <p>Lorem ipsum doller sit amet. Lorem ipsum doller sit amet. Lorem ipsum doller sit amet. Lorem ipsum doller sit amet.</p> 
        <input type="submit" value="Next" className="button button-white" onClick={this.stepOne} /> 
       </div> 
       <div id="div2"> 
        <h2>Step 2</h2> 
        <p>Lorem ipsum doller sit amet.</p> 
        <input type="submit" value="Prev" className="button button-white" onClick={this.stepBackOne} /> 
        <input type="submit" value="Next" className="button button-white" onClick={this.stepTwo} /> 
       </div> 
       <div id="div3"> 
        <h2>Step 3</h2> 
        <p>Lorem ipsum doller sit amet. Lorem ipsum doller sit amet. Lorem ipsum doller sit amet. Lorem ipsum doller sit amet.</p> 
       </div> 
      </div> 
     ); 
    } 
}); 

ReactDOM.render(<Getstarted /> , document.body); 

Answer 1

而不是硬編碼onclick=this.stepTwo，你應該保持{step: 1}的狀態，並使用onclick=this.nextStep.bind(this)

nextStep可能看起來像這樣

function nextStep(event) { 
    event.preventDefault(); 
    this.setState({step: this.state.step+1}); 
} 

你可以做同樣的事情prevStep如果這樣的行動被允許

function prevStep(event) { 
    event.preventDefault(); 
    this.setState({step: this.state.step-1}); 
} 

然後你render功能將呈現基於當前的step狀態的顯示。任何在每個步驟中收集的數據也可以存儲在組件狀態中。