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

Question

SCENERIO用户有一个下拉列表,他选择了一个选项.我想显示该下拉列表并将该选项设置为上次由该用户选择的默认值.

我在选项上使用了选定的属性,但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？

Answer 1

React使用value而不是selected表单组件的一致性.您可以使用defaultValue设置初始值.如果您正在控制该值,您也应该设置value.如果没有,请不要设置value而是处理onChange事件以响应用户操作.

请注意,value并且defaultValue应该与value选项匹配.

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和违反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>
    )
}

Answer 3

谢谢大家的关注！我和我的同事刚刚发现该default_value属性是一个常量，而不是一个变量。

在我构建的其他 React 表单中，Select 的默认值是在关联的 Context 中预设的。因此第一次渲染 Select 时，default_value被设置为正确的值。

但在我最新的 React 表单（一个小模态）中，我将表单的值作为 props 传递，然后使用 auseEffect填充关联的 Context。因此，第一次渲染 Select 时，default_value设置为null。然后，当填充 Context 并且应该重新渲染 Select 时，default_value无法更改，因此不会设置初始默认值。

解决方案最终很简单：使用该value属性。但弄清楚为什么default_value它不像我的其他表单那样工作需要一些时间。

我发布此内容是为了帮助社区中的其他人。

Answer 4

像这样使用defaultValue和onChange

const [myValue, setMyValue] = useState('');

<select onChange={(e) => setMyValue(e.target.value)} defaultValue={props.myprop}>
                    
       <option>Option 1</option>
       <option>Option 2</option>
       <option>Option 3</option>

</select>

示例 https://codesandbox.io/s/priceless-lamarr-fetpr?file=/src/App.js

Answer 5

你可以做的是有selected对属性<select>标签是一个属性this.state您在构造函数中设置.这样,您设置的初始值(默认值)以及下拉菜单更改时您需要更改状态.

constructor(){
  this.state = {
    selectedId: selectedOptionId
  }
}

dropdownChanged(e){
  this.setState({selectedId: e.target.value});
}

render(){
  return(
    <select value={this.selectedId} onChange={this.dropdownChanged.bind(this)}>
      {option_id.map(id =>
        <option key={id} value={id}>{options[id].name}</option>
      )}
    </select>
  );
}