反应状态更新落后一步

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

这确保 setProperty 在 setState 完成并且在您的状态中具有正确值之后被调用。

编辑：这是一个有效的example。