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>

在React js下拉菜单中未选中禁用的选项未设置为默认值

1 个答案: