Question

我有一个简单的组件，它呈现select标签并将选定的值与状态同步： class App扩展了React.Component { onChange =（event）=＆gt; { this.props.updateValue（“value”，event.target.value）; }; render（）{ const {value} = this.props; 返回＆lt; div＆gt; ＆LT;标签＆gt; ＆lt; span＆gt;选择smth＆lt; / span＆gt; ＆lt; select name =“select”value = {value} onChange = {this.onChange}＆gt; ＆lt; option value =“1”＆gt; First＆lt; / option＆gt; ＆lt; option value =“2”＆gt; Second＆lt; / option＆gt; ＆LT; /选择＆GT; ＆LT; /标签＆gt; ＆lt; p＆gt;价值：{value}＆lt; / p＆gt; ＆LT; / DIV取代; } } export default connect（state =＆gt; {value：state.value}，{updateValue：actions.updateValue}）（App）我的问题是，在第一次渲染时，来自商店的值是空的。但是，当我使用document.querySelector（'[name =“select”]'）。值检查值时，它显示了一些值。所以我的UI状态与商店状态不同步。当以后的用户提交表单时，将不会发送该值。如何始终将选择值与Redux存储状态保持同步？查看CodePen的完整代码： http://codepen.io/anon/pen/ObxNPp?editors=0010 UPD。实际代码也使用Redux。更新了代码示例以显示该内容。设置初始值将不起作用，因为商店对可用选项一无所知。

Answer 1

将您的状态设置为开头的正确值：

http://codepen.io/anon/pen/qqPZva

state = {
  value: this.props.value
};

ReactDOM.render(
  <App value="2" />,
  document.getElementById('root')
);

根据评论更新：

state = {
  value: this.props.options[0].value
};

Answer 2

<select>标记的初始状态未正确设置。你需要设置：

class App extends React.Component {
  state = {
    value: 1
  };
  onChange = (event) => {
    this.setState({value: event.target.value});
  };

  render() {
    const {value} = this.state;
    return <div>
      <label>
        <span>Select smth</span>
        <select name="select" value={value} onChange={this.onChange}>
          <option value="1">First</option>
          <option value="2">Second</option>
        </select>
      </label>
      <p>Value: {value}</p>
    </div>;
  }
}

由于value的值未按照初始状态定义，因此选择菜单未给出选定的值，导致第一个选项呈现为浏览器选择的，这是drop的默认行为浏览器中的下拉菜单。

为了清晰起见，请查看此分叉CodePen。

Answer 3

问题是你没有为你的状态变量＆＃34;值＆＃34;分配任何值。在console.log('value', value)之后放置一个控制台const {value} = this.state;，您将看到该值未定义。当您使用document.querySelector('[name="select"]').value检查值时，它会为您提供select而不是状态变量的值，一旦您更改了下拉列表，状态变量会在此后一切正常后收到值。在更改下拉列表之前，状态变量值将不确定。由于状态值未定义，因此选择渲染第一个元素。

为状态变量指定适当的值：

state = {
   value: 1 or 2,
};

React.js + Redux中<select>标记的初始值

3 个答案:

根据评论更新：