警告: 在 < select > 上使用“ defaultValue”或“ value”道具，而不要在 < option > 上设置“ select”

SCENARIO 用户有一个下拉列表，他选择一个选项。我想显示该下拉菜单，并使该选项成为该用户上次选择的默认值。

我在选项上使用 选定属性，但是 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作为选择的选项可以是任何选项。我怎样才能找到 默认值？

213450 次浏览
小开

What you could do is have the selected attribute on the <select> tag be an attribute of this.state that you set in the constructor. That way, the initial value you set (the default) and when the dropdown changes you need to change your 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>
);
}
小开
最佳答案

React 使用 ABC0 instead of selected来保持表单组件之间的一致性。可以使用 defaultValue设置初始值。如果你是 控制价值，你也应该设置 value。如果没有，不要设置 value，而是处理 onChange事件以响应用户操作。

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

小开

在希望设置占位符而不希望选择默认值的实例中，可以使用此选项。

      <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>
)
}
小开

谢谢你们的帖子！我的同事和我刚刚发现，default_value属性是一个常量，而不是一个变量。

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

但是在我最新的 React 表单(一个小模态)中，我将表单的值作为道具传递，然后使用 useEffect来填充相关的 Context。因此，第一次呈现 Select 时，default_value被设置为 null。然后，当上下文被填充并且选择应该被重新呈现时，default_value不能被更改，因此初始默认值不会被设置。

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

我发布这个是为了帮助社区里的其他人。

小开

有钩子和 useState

Use defaultValue to select the default value.

    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 />
</>
)
小开

像这样使用 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

小开

设置值而不使用选项中的选择的简单解决方案,

遵循以下步骤:

将该值默认为0(我不认为它是一个正在使用的值) ，设置为 X 柱

参考图像enter image description here

4 steps

  1. 将 X 柱 : 0的“ IntialValue”设置为
  2. 使用[ 选定 ]中使用的相同字符串，并将其设置为这里的 if 条件，当找到时，标记为“ X-column = 0”
  3. 删除 标签中设置的“选定”和其他项目(如果有的话) 最后设定这个条件

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

我已经尝试过了，它对我很有效

一个小的修正. . 第45行的图像. . 阅读列为 Column _ value _ id

小开

为了避免控制台错误，我尝试了不同的选项。下面的选项可以在控制台没有错误的情况下与选定的选项一起工作:

    {const [myValue, setMyValue] = useState('');
const changeHandler = (e) => {
setMyValue(e.target.value);
};
<select id="select" value={myValue} onChange={changeHandler}>
{!myValue&& <option value="">choise from list</option>}
{elementsArr.map((el) => {
return (
<option key={el.id} value={el.name}>
{el.name}</option>
);
})
</select>}

提交答案