reactjs - 禁用选项未在 React js 下拉列表中设置为默认值

Question

在下面的下拉列表中，为什么 Select City 没有作为页面加载时的默认选择出现在下拉列表中？相反，City1 显示为默认选择的选项。

我有默认编码的选项:

  <option value="" disabled selected>
    Select City
  </option>

选项在另一个js文件中编码如下:

 import React from 'react'

const cityoptions = [
  { value: '1', name: 'City1' },
  { value: '2', name: 'City2' },
  { value: '3', name: 'City3' },
....

以下是下拉组件。

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

const InputCities = ({ value, change }) => (
  <div className="edit_caste_div">
    <Select
      placeholder="Select option"
      value={value}
      valueChange={e => change('city', e)}
      className="edit_city my2"
    >
      <option value="" disabled selected>
        Select City
      </option>
      {cityOptions.map((e, key) => {
       return <option key={key} value={e.value}>{e.name}</option>
       })}
    </Select>
  </div>
)

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

Answer 1

您应该添加一个 defaultValue 属性来选择并将其设置为禁用值

<Select
      defaultValue="Select City"
      valueChange={e => change('city', e)}
      className="edit_city my2"
    >
      <option value="Select City" disabled>
        Select City
      </option>
      {cityOptions.map((e, key) => {
       return <option key={key} value={e.value}>{e.name}</option>
       })}
    </Select>