javascript - 获取 React-select 分组选项的父值

Question

我正在使用带有分组选项的react-select，它们的分组如下:

{
  label: PARENT_NAME,
  value: PARENT_ID,
  options: [
    {
      label: CHILD_NAME,
      value: CHILD_ID,
    }
  ]
}

我有一个包含这些选项的数组，我将其传递给组件，如下所示:

<Select
  options={ARR_OF_OPTIONS}
  onChange={this.handleChange("name")}
/>

我的handleChange函数是这样的:

handleChange = name => selectedOption => {
  const value = selectedOption.value
  this.setState({ [name]: value, })
}

我的问题是: 选择子选项时是否可以获取PARENT_ID？

希望我说清楚了。

提前致谢

Answer 1

每个选项都可以有更多属性

{
  label: PARENT_NAME,
  value: PARENT_ID,
  options: [
    {
      label: CHILD_NAME,
      value: CHILD_ID,

      // additional properties
      group: PARENT_ID,
      otherValue: OTHER_VALUE,
    }
  ]
}

selectedOption 是一个对象 - 您可以轻松访问group、otherValue

handleChange = name => selectedOption => {
  const value = selectedOption.value
  console.log("group", selectedOption.group )
  this.setState({ [name]: value, })
}

此方法(基于原始的 react 选择分组示例)会重复数据(在本例中)，但对于值可以存在于多个组中的情况(无法通过比较值可靠地找到)来说是安全的。