反应-警告：在上使用`defaultValue`或`value`道具 <select>而不是将“ selected”设置为on <option>

Question

如何解决此警告？

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

曾经有人问过这个问题，但是解决方案对我没有帮助。 我无法设置为“ 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

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