选择元素中的选定选项在反应中不起作用答案

【问题标题】：selected option in select element does not work in react选择元素中的选定选项在反应中不起作用
【发布时间】：2015-12-12 15:16:03
【问题描述】：

反应中的以下代码显示此错误：

“在“上使用defaultValue 或value 道具。

<select>
        <option value="" disabled selected>Choose your option</option>
        <option value="1">Option 1</option>
        <option value="2">Option 2</option>
        <option value="3">Option 3</option>
</select>

试过了还是不行：

<select value="1">
        <option value="" disabled>Choose your option</option>
        <option value="1">Option 1</option>
        <option value="2">Option 2</option>
        <option value="3">Option 3</option>
</select>

试图在这个link 的文档中实现，但不能使选定的工作在选项中。此外，我希望在表单首次加载时将“选择您的选项”作为默认选择选项

【问题讨论】：

标签： reactjs reactjs-flux react-jsx

【解决方案1】：

您应该在组件中保留一个状态变量。我写了一些代码，这里是live JSBin：

var MySelect = React.createClass({
  getInitialState: function() {
    return {
      value: "0"
    };
  },

  handleChange: function(event) {
    var value = event.target.value;
    console.log(value, " was selected");
    this.setState({value: event.target.value});
  },

  render: function() {
    return (
      <select value={this.state.value} onChange={this.handleChange}>
        <option value="0">Choose your option</option>
        <option value="1">Option 1</option>
        <option value="2">Option 2</option>
        <option value="3">Option 3</option>
      </select>
    );
  }
})

React.render(
  <MySelect />, document.body
);

将 console.log 替换为 Flux 事件或通过回调将值传递给您的父级。

【讨论】：