警告：使用 &#39;defaultValue&#39; 或 &#39;value&#39; 道具<select>而不是设置“选择”<option>

Question

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

我在选项上使用了selected属性，但 React 生成了一个警告，要求我在选择时使用默认值。

例如

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 。 如果没有，请不要设置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>

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

编辑

如果这是受控组件

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

 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

你可以做的是让<select>标签上的selected属性成为你在构造函数中设置的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 4

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

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

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

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

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

Answer 5

使用 Hooks 和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 6

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

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

请按照以下步骤操作：

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

参考图片

4个步骤

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

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

我已经尝试过，它对我有用

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