Question

场景用户有一个下拉列表并选择一个选项。我想显示该下拉列表并将该选项设置为上次由该用户选择的默认值。我在选项上使用了选定的属性，但React会生成一个警告，要求我在select上使用默认值。对于例如 render：function（）{ let option_id = [0,1]; let options = [{name：'a'}，{name：'b'}]; let selectedOptionId = 0 回来（＆lt; select defaultValue = {selectedOptionId}＆gt; {option_id.map（id =＆gt; ＆lt; option key = {id} value = {id}＆gt; {options [id] .name}＆lt; / option＆gt; ）} ＆LT; /选择＆GT; ） } }）; 问题是我不知道selectedOptionId，因为所选的选项可以是任何选项。我怎样才能找到defaultValue？

Answer 1

React使用value instead of selected来确保表单组件的一致性。您可以使用defaultValue设置初始值。如果您是controlling the value，则还应设置value。如果没有，请不要设置value，而是处理onChange事件以对用户操作做出反应。

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

Answer 2

您可以做的是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>
  );
}

Answer 3

在要设置占位符且未选择默认值的实例中，可以使用此选项。

      <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>

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

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

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

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

但是在我最新的React表单（一个小模式）中，我将表单的值作为prop传递，然后使用useEffect来填充关联的Context。因此，第一次呈现Select时，default_value被设置为null。然后，当填充了Context并且应该重新呈现Select时，default_value无法更改，因此未设置初始默认值。

解决方案最终很简单：改用value属性。但是弄清楚为什么default_value不能像我的其他表格一样工作需要花费一些时间。

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

Answer 6

带有钩子和`useState`

使用defaultValue选择默认值。

    const statusOptions = [
        { value: 1, label: 'Publish' },
        { value: 0, label: 'Unpublish' }
    ];
    const [statusValue, setStatusValue] = useState('');
    const handleStatusChange = e => {
        setStatusValue(e.value);
    }

return(
<>
<Select options={statusOptions} 
    defaultValue={[{ value: published, label: published == 1 ? 'Publish' : 'Unpublish' }]} 
    onChange={handleStatusChange} 
    value={statusOptions.find(obj => obj.value === statusValue)} required />
</>
)

Answer 7

不使用selected in选项设置值的简单解决方案，

请按照以下步骤操作：

将值默认为 0 [我不认为它是要使用的值] 到 x-column

参考图片

4 个步骤

将 x 列 : 0 的“IntialValue”设置为
使用在您的 [selected] 中使用的相同字符串，并在此处使用 if 条件进行设置，当找到时，标记“values.x-column = 0"
删除标记中设置的“选定”和其他项目[如果有] 4.最后设置这个条件

现在导航，列中的值默认为第2步中标记的值/您希望在selected中设置的值

我已经尝试过并且对我有用

一个小的更正.. 图像中的第 45 行.. 将该列读作 column_value_id

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

7 个答案:

带有钩子和`useState`

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

7 个答案:

带有钩子和useState

带有钩子和`useState`