より良い方法で反応して価値を得る

Question

私はこの反応成分を持っており、うまくいきます！

var SettingsCtrl = React.createClass({ 
    getInitialState: function() { 
     return { 
      value: 'select' 
     } 
    }, 
    changeColor: function(){ 
     this.setState({value: event.target.value}); 
     if (document.getElementById('lang').value !== "select"){ 
      document.body.style.backgroundColor = document.getElementById('lang').value 
      localStorage.setItem("color", document.getElementById('lang').value); 

     } 
    }, 
    render: function() { 
     return (
     <div> 
      <select id="lang" onChange={this.changeColor} value={this.state.value}> 
       <option value="select">Select</option> 
       <option value="lightblue">lightblue</option> 
       <option value="lightcoral">lightcoral</option> 
       <option value="lightgreen">lightgreen</option> 
      </select> 
     </div> 
     ); 
    } 
}); 
ReactDOM.render(
    <SettingsCtrl />, 
    document.getElementById('settingsMenu') 
    ); 

私の質問私は何とか状態値とdocument.getElementById('lang').valueを変更することができる場合で、私はthis.state.valueが、doesntの仕事をしてみてください...

here is the gitlab repo

Answer 1

SETSTATEは状態を変更しません同期の方法で。 だから、あなたは実行します。

this.setState({value: event.target.value}); 

あなたは状態がactualyすでに変わっ何を確認することはできません。

より良い意思決定：あなたがstate.valueを必要としないこの場合

changeColor: function(event){  
    if(event.target.value !== 'select') { 
     document.body.style.backgroundColor = event.target.value 
     localStorage.setItem("color", event.target.value); 
    } 
} 

。