react状态更新步骤落后

IT技术 reactjs state
2021-05-21 07:54:41

这个颜色选择器可以工作，但落后一步。我一直在使用 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>)
  }
})
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。

编辑：这是一个工作示例。

其它你可能感兴趣的问题
上一篇Ag-grid对cellFocused的相反方法 下一篇如何在 ReactJS 上触发组件中的状态更改？