如何使用 Array 在 React JS 中为以下代码片段实现下拉

Question

<Select onChange={(e) => setValue(e.target.value)} value={value} labelText="Year">
   <Select.Option value="Last 18 Months">2020</Select.Option>
   <Select.Option value="Last 12 Months">2019</Select.Option>
   <Select.Option value="Last 6 Months">2018</Select.Option>
   <Select.Option value="Last Month">2017</Select.Option>
</Select>

如何使用 Array 为给定的代码片段在 React JS 中实现下拉菜单

Answer 1

如果我理解正确的话：

const values = [
  {
    value: 'Last 18 Months',
    title: '2020'
  },
  {
    value: 'Last 12 Months',
    title: '2019'
  },
  {
    value: 'Last 6 Months',
    title: '2018'
  },
  {
    value: 'Last Month',
    title: '2017'
  }
]

<Select 
  onChange={(e) => setValue(e.target.value)} 
  value={value} 
  labelText="Year"
>
  {values.map(({ value, title }) => (
    <Select.Option key={value} value={value}>
      {title}
    </Select.Option>
  ))}
</Select>

如何使用 Array 在 React JS 中为以下代码片段实现下拉

How to implement Drop down in React JS using Array for the below snippet of code

arrays

onchange

drop-down-menu

reactjs