反应-警告：在<select>上使用`defaultValue`或`value`属性，而不是在<option>上设置`selected`

Question

如何解决此警告？   警告：使用defaultValue或value props代替在上选择的设置。 曾经有人问过这个问题，但是解决方案对我没有帮助。我无法设置为“ selected”，因为此处的值来自Redux状态（如果存在）。如果redux状态没有值，则应显示默认选项-“选择性别” 这是我的代码： 从“反应”中导入React，{组件} 从“ ../../edit-profile/gender-input”导入InputGender ... ... 这是InputGender 从'react'导入React 从'prop-types'导入PropTypes 导入从'../others/input/select'中选择 const InputGender =（{{value，change}）=>（   

    <选择       placeholder =“选择选项”       值= {值}       valueChange = {e => change（'gender'，e）}       className =“ edit_gender mb-2”     >                选择性别              男性       女性       其他        

） InputGender.propTypes = {   值：PropTypes.string.isRequired，   更改：PropTypes.func.isRequired， } 导出默认的InputGender

Answer 1

从选项中删除选定的属性。值道具将自动在选项中设置选定的值（由react处理）。

<option value="" disabled selected>
{/* remove selected attribute ^^ */}

应该是：

<option disabled>

Answer 2

您必须进行一些更改。

如果要选择禁用的选项或性别值以选择其他值''

，则发送<InputGender value={gender} change={this.change} />

选项应该是这样的。

<option value="" disabled>{/* no need of selected */}
    Select Gender
  </option>

Answer 3

如果要选择一个选项案例，则需要将目标选项值写入依赖于select标签的值，如下所示：

<select value="first">
  <option value="first">First</option>
  <option value="second">Second</option>
</select>

我知道，如果要捕获每个表单标签上的onChange钩子，则需要为每个表单的输入使用onChange属性。因此，请更改为：

<Select
      placeholder="Select option"
      value={value}
      onChange={e => change('gender', e)}
      className="edit_gender mb-2"
    >
 ...