反应状态更新步骤

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。