小编Lan*_*nce的帖子

使用搜索 API 时,如何加载带有初始选项的 React-select Async 以用于编辑项目功能?

我正在使用 React-Select 的异步选择来实现一个下拉列表,用户将能够在其中搜索大量数据。他们在搜索时会看到员工的姓名,并且可以选择多名员工。

React-select 将使用我拥有的搜索 API 获取数据,并使用此方法在后面插入查询:

const loadOptions = async () => {
        const res = await fetch(`https://example.com/search_user?value=${query}`);
        const data = await res.json();
        const results = data.Result;

        if (results === 'No result found.') {
            return [];
        }

        return results;
    };
Run Code Online (Sandbox Code Playgroud)

我想要获取的是员工 ID 及其全名,然后在用户提交表单后将这两个信息发布到 API。

所有这些工作都很完美,但现在我想实现一个编辑功能,用户可以编辑Group Members已保存到数据库中并创建的内容。

因此,很自然地,我需要使用react-select初始选项加载 的异步下拉列表,但是当我使用搜索 API 时,我不知道如何加载初始选项,该搜索 API 在我输入某些内容后只会获得特定的结果列表。

当用户单击编辑时,我想要这样的东西,它将显示数据库中保存的员工姓名(可以选择单个或多个选项): 在此输入图像描述

这里是用于参考的codesandbox,但我只使用了一个假的API链接:

编辑奇怪的共振l631s

编辑:

对于@Pitter的参考: 在此输入图像描述

最新更新: 我尝试使用valuePitter 提到的选项,但不知何故,即使我尝试取消选择或清除选项以及尝试搜索并选择新选项,输入的选项也没有改变。

最终更新 终于我成功了!我所需要的只是将value道具/组件设置为一个状态,并为道具/组件提供一个handleChange方法onChange来更改值的状态。它实际上与通常的react-select 的工作方式相同Select

下面是我使用过的代码:

// Creating …
Run Code Online (Sandbox Code Playgroud)

reactjs react-select

8
推荐指数
1
解决办法
2万
查看次数

标签 统计

react-select ×1

reactjs ×1