Question

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

＆＃34;在＆＃34;上使用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中的doc中实现，但无法在选项中选择所选内容。此外，我希望选择＃34;选择你的选择＆＃34;作为表单首次加载时的默认选择选项

Answer 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事件，或通过回调将值传递给您的父级。

select元素中的selected选项在react中不起作用

1 个答案: