reactjs - React Grommet Select - 将对象数据作为选项传递

Question

我正在使用 Grommet v2 组件，并尝试镜像 Grommet 故事书中的选择“季节”示例中使用的显示。

该字段如下所示:

不同之处在于我的数据需要分离标签和值:

const Options = [
   {
     label: "S01",
     value: "283736"
   },
   {
     label: "S02",
     value: "293774"
   },

而不是使用默认值:

const Options = [
  "S01",
  "S02",

这是 Codesandbox 上的示例

该对象格式用于 Grommet 的 storybook 中的 ObjectMultiSelect 示例。 。我发现 Select 组件需要labelKey="label" 和 valueKey="value" 将对象作为选项加载，但是添加这两个属性似乎会破坏组件选项。

我希望传入的数据类似于

const Options = [
   {
     label: "S01",
     value: "283736"
   },
   {
     label: "S02",
     value: "293774"
   },

并且仍然显示如上所示的选项。

Answer 1

            <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.