从 React-Select 组件获取选定值的最佳方法是什么？

Question

我正在使用 react select 创建选项下拉列表。我想访问下拉列表中的标签，但还想访问与数据相关的值。例如：

import Select from 'react-select'


let options = [
 {
 label: Small,
 change: -3
 },
 {
 label: Medium,
 change: 0
 }
]

<Select id={"options"} defaultValue={options[0]} options={options} />

let selectedChange = // How can I access the change property?
let selectedLabel = document.querySelector(`#options`).textContent // This is how I have been getting the proper label

<button onClick={console.log(selectedChange, selectedLabel)}></button>

我想通过将选项更改值添加到默认价格来更改项目的显示成本，但我只想在选择中显示标签。

Answer 1

React-SelectonChange属性采用一个方法，并接收所选项目以及正在执行的操作：

function(
  One of<
    Object,
    Array<Object>,
    null,
    undefined
  >,
  {
    action required One of<
      "select-option",
      "deselect-option",
      "remove-value",
      "pop-value",
      "set-value",
      "clear",
      "create-option"
    >
  }
  ) => undefined

作为开发人员，您可以选择如何处理从此方法返回的对象。例如，您可以检查此Codesandbox。