在 React-select 分组选项上获取父 VALUE

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, })
}

我的问题是： 在 select 子选项时是否可以得到 PARENT_ID？

希望我说清楚了。

提前致谢

Answer 1

您可以使用纯 JavaScript 实现此目的。在您的 handleChange 方法中，您应该从 ARR_OF_OPTIONS 中过滤出包含所选子选项的分组对象。

const selectedParent = ARR_OF_OPTIONS
  .find((group) => group.options.find(({ value }) => value === selectedOption.value));

const { value } = selectedParent;  // this gives you the parent id

Answer 2

每个选项可以有更多属性

{
  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-select 分组示例）复制数据（在本例中）但对于值可以存在于多个组中的情况是安全的（无法通过比较值可靠地找到） ).

在 React-select 分组选项上获取父 VALUE

Get parent VALUE on React-select grouped options

javascript

reactjs

react-select