[英]React Grommet Select - passing in object data as options
I am using Grommet v2 components and trying to mirror the display used in the Select 'Seasons' example in Grommet's storybook.我正在使用 Grommet v2 组件并尝试镜像 Grommet 故事书中选择“季节”示例中使用的显示。
The field appears like this:该字段显示如下:
The difference is my data needs to separate label and value:不同之处在于我的数据需要将标签和值分开:
const Options = [
{
label: "S01",
value: "283736"
},
{
label: "S02",
value: "293774"
},
instead of using the default:而不是使用默认值:
const Options = [
"S01",
"S02",
Here is an example on Codesandbox这是Codesandbox上的示例
The object format was used in Grommet's example of ObjectMultiSelect in their storybook .对象格式用于 Grommet 在其故事书中的 ObjectMultiSelect 示例中。 I found the Select component needs
labelKey="label"
and valueKey="value"
to load the objects as options, but adding these two props seems to break the component options.我发现 Select 组件需要
labelKey="label"
和valueKey="value"
来加载对象作为选项,但是添加这两个道具似乎破坏了组件选项。
I would like for the data passed in to resemble我希望传入的数据类似于
const Options = [
{
label: "S01",
value: "283736"
},
{
label: "S02",
value: "293774"
},
and still have the options displayed as above.并且仍然有如上显示的选项。
<Select
options={[
{
lab: "S01",
val: "283736"
},
{
lab: "S02",
value: "293774"
}
]}
labelKey="lab"
dropHeight="large"
name="primaryServer"
value={this.props.values.primaryServer}
placeholder="Select Primary Server"
emptySearchMessage={"No Servers Available"}
onChange={({ option }) => {
console.log(option.lab)
console.log(option.val)
}}
/>
// Output // S01 // 283736
// This worked for me. labelKey="lab" is required.
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.