在 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 function 是這樣的：

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

我的問題是：選擇子選項時是否可以獲得 PARENT_ID？

希望我說清楚了。

提前致謝

Answer 1

您可以使用純 JavaScript 來實現這一點。 在您的 handleChange 方法中，您應該從包含所選子選項的ARR_OF_OPTIONS中過濾掉分組的 object。

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是 object - 您可以輕松訪問group 、 otherValue

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

此方法（基於原始 react-select 分組示例）復制數據（在這種情況下）但對於值可以存在於多個組中的情況是安全的（不能通過比較值可靠地找到）。