リア状態の更新ステップ

Question

このカラーピッカーは一歩前進しますが、私はReact 15.4.2を使っています。 それ以降のバージョンで修正することは問題ですか？ それが私のせいである場合、「保留状態」を習得する方法を教えてください。 ペンhttp://codepen.io/462960/pen/qrBLje コード：

let Input = React.createClass({ 
    getInitialState(){ 
     return { 
     today_color: "#E5D380" 
    }; 
    }, 
    colorChange(e){ 
     this.setState({ 
      today_color: e.target.value 
     }) 
     document.querySelector('html').style.setProperty('--base', this.state.today_color); 
    }, 
    render(){ 
    return (<div> 
      <input className="today_color" onChange={this.colorChange} type="color" defaultValue={this.state.today_color}/> 
      </div>) 
    } 
}) 

Answer 1

あなたが抱えている問題は、SETSTATEコンポーネント再レンダリングを呼び出すと、このコードが再度呼び出されていない一度ということです。初めて

document.querySelector('html').style.setProperty('--base', this.state.today_color); 

そして、それが呼び出され、this.state.today_colorは依然として以前の値です。

何をすべきことは以下の通りです：

this.setState({ 
    today_color: e.target.value 
},() => document.querySelector('html').style.setProperty('--base', this.state.today_color)); 

これは、SETSTATEが行われた後、あなたの状態に正しい値を持った後のsetPropertyが呼び出されますを確認します。

編集：ここをクリックexampleです。