警告：在 <select> 上使用 'defaultValue' 或 'value' 道具，而不是在 <option> 上设置 'selected'

Question

场景 用户有一个下拉菜单，他选择了一个选项。我想显示该下拉列表并将该选项设为该用户上次选择的默认值。

我在 option 上使用 selected 属性，但 React 会生成一个警告，要求我在 select 上使用默认值。

例如

render: function() {
    let option_id = [0, 1];
    let options = [{name: 'a'}, {name: 'b'}];
    let selectedOptionId = 0

    return (
      <select defaultValue={selectedOptionId}>
        {option_id.map(id =>
        <option key={id} value={id}>{options[id].name}</option>
        )}
      </select>
    )
  }
});

问题是我不知道 selectedOptionId 因为所选选项可以是任何选项。我将如何找到 defaultValue ？

原文由 Piyush 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

React 使用 value 而不是 selected 以确保表单组件之间的一致性。您可以使用 defaultValue 设置初始值。如果你 控制值，你也应该设置 value 。如果没有，请不要设置 value 而是处理 onChange 事件以对用户操作做出反应。

请注意， value 和 defaultValue 应该与选项的 value 匹配。

原文由 ryanjduffy 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

在您想要设置占位符而不选择默认值的情况下，您可以使用此选项。

       <select defaultValue={'DEFAULT'} >
        <option value="DEFAULT" disabled>Choose a salutation ...</option>
        <option value="1">Mr</option>
        <option value="2">Mrs</option>
        <option value="3">Ms</option>
        <option value="4">Miss</option>
        <option value="5">Dr</option>
      </select>

在这里，用户被迫选择一个选项！

编辑

如果这是受控组件

不幸的是，在这种情况下，您将不得不同时使用 defaultValue 和 value 来稍微违反 React。这是因为语义反应不允许将禁用值设置为活动。

  function TheSelectComponent(props){
     let currentValue = props.curentValue || "DEFAULT";
     return(
      <select value={currentValue} defaultValue={'DEFAULT'} onChange={props.onChange}>
        <option value="DEFAULT" disabled>Choose a salutation ...</option>
        <option value="1">Mr</option>
        <option value="2">Mrs</option>
        <option value="3">Ms</option>
        <option value="4">Miss</option>
        <option value="5">Dr</option>
      </select>
    )
}

原文由 Dehan 发布，翻译遵循 CC BY-SA 4.0 许可协议