React - 警告：在 <select> 上使用 `defaultValue` 或 `value` 道具，而不是在 <option> 上设置 `selected`答案

【问题标题】：React - Warning: Use the `defaultValue` or `value` props on <select> instead of setting `selected` on <option>React - 警告：在 <select> 上使用 `defaultValue` 或 `value` 道具，而不是在 <option> 上设置 `selected`
【发布时间】：2018-09-03 05:39:13
【问题描述】：

如何解决这个警告？

警告：使用defaultValue 或value 属性，而不是在<option> 上设置selected。

这已经被问过一次，但解决方案对我没有帮助。我无法设置 selected 因为这里的值来自 Redux 状态（如果存在）。如果 redux 状态没有值，它应该显示默认选项 - “选择性别”

这是我的代码：

import React, { Component } from 'react'
import InputGender from '../../edit-profile/gender-input'
...
...

<InputGender value={gender} change={this.change} />

这里是 InputGender

import React from 'react'
import PropTypes from 'prop-types'
import Select from '../others/input/select'

const InputGender = ({ value, change }) => (
  <div className="edit_gender_div">
    <Select
      placeholder="Select option"
      value={value}
      valueChange={e => change('gender', e)}
      className="edit_gender mb-2"
    >
      <option value="" disabled selected>
        Select Gender
      </option>
      <option>Male</option>
      <option>Female</option>
      <option>Other</option>
    </Select>
  </div>
)

InputGender.propTypes = {
  value: PropTypes.string.isRequired,
  change: PropTypes.func.isRequired,
}

export default InputGender

【问题讨论】：

标签： reactjs

【解决方案1】：

从选项中删除选定的属性。 value props 会在 option 中自动设置选中的值（由 react 处理）。

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

应该是：

<option disabled>

【讨论】：

【解决方案2】：

你必须做出一些改变。

如果您想选择禁用选项或性别值以选择其他值<InputGender value={gender} change={this.change} />，请发送''

而且选项应该是这样的。

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

【讨论】：

【解决方案3】：

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

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

【讨论】：