从反应搜索栏中的选定值设置状态

Question

我是新手，如果这看起来过于简单，我提前道歉。我正在使用 react-select 创建搜索栏。我根据项目的要求使用带有反应挂钩的功能组件。我目前正在从 API 中读取值并加载包含这些值的下拉列表。接下来我想做的是使用上下文 API 从下拉列表中进行选择并在其他组件中使用该值，但目前在实施时我似乎无法访问所选值我的下拉菜单。下面是代码。

import React, { useState, useEffect } from 'react';
import Select from 'react-select';
import GetData from '../../api';

function SearchBar() {
  const [data, setData] = useState([]);
  useEffect(() => {
    setData(
      GetData().map((DataObject) => (
        {
          value: DataObject.id,
          label: DataObject.name,
        }
      )),
    );
  },
  []);

  return <Select options={data} />;
}

export default SearchBar;

我已尝试获取如下建议的值，但数据及其属性未定义。

  return <Select options={data} onChange={() => alert(data.value)} />;

我想我需要做的是为所选值设置另一个状态变量，但这是最佳实践。我试图实现这一点，但我似乎无法访问 data.value 或 data.label?将所选值设置为状态以便我可以将其传递到上下文的最佳方法是什么？提前致谢！

Answer 1

Select 有一个 onChange 道具，你可以传递一个回调。回调将接收新选择的选项作为参数，因此您可以简单地：

<Select
  options={data}
  onChange={(selectedOption) => {
    console.log(selectedOption);
    // Do something with selectedOption...
  }}
/>

Answer 2

下面的技巧！

  return <Select options={data} onChange={(value) => alert(value.value)} />;

从反应搜索栏中的选定值设置状态

Setting state from selected value in react searchbar

reactjs

react-select