Semantic React - Form.Select如何使用自定义数组选项

时间:2017-11-02 07:52:05

标签: forms reactjs web semantic-ui semantic-ui-react

关于From.Select的语义反应文档是为它提供一个需要具有类似特定数组的prop选项:

const options = [
 { key: 'm', text: 'Male', value: 'male' },
 { key: 'f', text: 'Female', value: 'female' },
]

并使用它:

<Form.Field control={Select} label='Gender' options={options} placeholder='Gender' />

如果我想使用具有自定义键和其他值的其他数组,例如:

const options = [
 { date: 'somedate', title: 'sometitle', },
 { date: 'somedate', title: 'sometitle', },
]

我收到有关使用错误道具的错误

我的问题是如何使用我自己的数组与此选择组件 谢谢 !

1 个答案:

答案 0 :(得分:0)

您可以重新设置选项的格式,然后再将其发送到语义组件:

import { get, map } from 'lodash'

const reformatOptions = options =>
  map(options, e => ({
    key: get(e, 'date'),
    value: get(e, 'date'),
    text: get(e, 'title'), // (or whatever other format you wish to use)
  }))

然后将options=reformatOptions(options)传递给您的语义组件