Получить родительское значение VALUE в сгруппированных параметрах React-select - PullRequest
Новая
       5

Получить родительское значение VALUE в сгруппированных параметрах React-select

1 голос
/ 29 мая 2020

Я использую response-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 при выборе дочернего параметра?

Надеюсь Я ясно дал понять.

Заранее спасибо

Ответы [ 2 ]

1 голос
/ 29 мая 2020

У каждой опции может быть больше свойств 

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

Этот метод (на основе исходный пример с группировкой response-select) дублирует данные (в этом случае), но это безопасно для случая, когда значение может существовать в нескольких группах (не может быть надежно найдено путем сравнения значения).

1 голос
/ 29 мая 2020

Вы можете добиться этого с помощью чистого 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
...