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

Posted 2023-02-22

【中文标题】选择元素中的选定选项在反应中不起作用

【英文标题】：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 的文档中实现，但不能使选定的工作在选项中。此外，我希望在表单首次加载时将“选择您的选项”作为默认选择选项

【参考方案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 事件或通过回调将值传递给您的父级。