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但不起作用...

here is the gitlab repo

Answer 1

setState不会以同步方式更改状态。那你就做了：

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

你无法确定状态已经发生了变化。

更好的决定：

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

在这种情况下，您不需要state.value。

以更好的方式获得价值

1 个答案: