问题标签 [react-select]

For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.

0 投票
2 回答
13548 浏览

javascript - 在保持过滤器的同时反应选择清除值

我正在开发一个权限系统,让用户控制谁可以访问/评论/编辑资源,就像您可以在 Google Drive 上找到的一样。我正在使用 React-Select multi 让资源所有者选择他想要授予资源访问权限的用户。

当我单击 react-select 显示的选项时,我希望将此选项添加到我的允许用户列表(由另一个组件处理的列表)中。这部分有效,我只是在 select 上使用了一个 onChange 处理程序(如您在下面的代码中所见)。

这就是我卡住的地方:一旦添加了选项,我想继续显示用户在文本字段中搜索第一个选项时可能使用的过滤器。它现在的工作方式,过滤器被删除,所有选项都显示在下拉列表中。

有什么简单的方法可以通过 React-Select 实现这一点吗?

非常感谢!

0 投票
0 回答
438 浏览

ajax - 反应选择隐藏输入不发布

在 onChange() 事件之后提交表单时,生成的隐藏输入不会发布。

Ajax 脚本完全没问题,并且提交时没有错误。唯一的问题是 react-select 生成的隐藏输入没有发布。

对我来说,似乎隐藏输入仅在我的表单提交后才插入到 DOM 中。我是否使用适当的事件来提交我的表格?

0 投票
0 回答
1120 浏览

reactjs - react-select AsyncCreatable isOptionUnique

我使用 JedWatsons react-select 来呈现我的选择下拉菜单。

目前我有:

父.js

Child.js 从 'react-select' 导入 {AsyncCreatable}

由于我的 Child.js 是一个无状态组件,我如何以及在哪里实现 isOptionUnique 以及如何获取新创建的值以便它显示在 Parent.js 中?

0 投票
0 回答
506 浏览

javascript - React select 需要双击才能折叠

我有 react-select 组件,这些组件与 redux 形式兼容,如下代码:

它工作正常,除了一件事。它需要单击两次才能折叠。为什么会这样?

0 投票
2 回答
3773 浏览

reactjs - 如何防止用户使用 React-Select Creatable 创建重复值?

我正在使用 react-select'Creatable进行下拉并允许用户在列表中创建新项目。

这就是我所拥有的:

现在用户可以创建新名称,即使它已经存在,创建如下所示的重复项。

重复名称

我看到有一个名为react-select siteisOptionUnique的选项。

在选项集中搜索任何匹配的选项。此功能可防止创建重复选项。默认情况下,这是标签和值的基本、区分大小写的比较。预期签名:({ option: Object, options: Array, labelKey: string, valueKey: string }): boolean

我一直无法使用它。我试过了isOptionUnique=trueisOptionUnique={options:this.props.workers}但我得到了Creatable.js:173 Uncaught TypeError: isOptionUnique is not a function错误。

我找不到一个例子isOptionUnique,过滤 react-select 以防止重复使用的最佳方法是什么Creatable

0 投票
2 回答
29741 浏览

javascript - Promise.then 不是一个函数 - 在 React 中处理多个 API 调用

我正在使用react-select来自动完成搜索栏中的选项。搜索栏会显示两个类别之一的结果,具体取决于它所命中的 API 端点。

现在,它可以处理来自一个点或另一个点的数据,但我无法将来自两个端点的数据返回到 react-select 的loadOptions参数。

这个关于多个 API 调用的答案中,我决定使用承诺一次返回所有数据,但我得到了错误Uncaught TypeError: promise.then is not a function at Async.loadOptions

这是我的代码loadOptions

0 投票
1 回答
2049 浏览

reactjs - 使用 css 类名和 react-virtualized 或 react-select

所以我试图将这两个模块集成到我的项目中,但我在处理它的 CSS 部分时遇到了困难。

我的项目正在使用 postcss 将我自己的 css 文件转换为“已编译”的 css 文件,并为每个文件添加了类名。react-virtualized 和 react-select 都有自己的 css 文件来定义样式,但是我不明白如何覆盖它们或将它们集成到我的项目中。

我的 webpack css 配置如下:

当我在我的主 app.js 文件中执行以下行时,我得到一个失败的 css 解析错误(意外令牌)。

我能够加载 CSS 样式的唯一方法是使用

意思是,将整个 CSS 复制到我自己的项目中,然后在没有 postcss 工作的情况下导入它。但是,我不知道这是否是最好的方法,因为它非常明确地使用这些模块。

有没有人有更好的解决方案?

0 投票
1 回答
5422 浏览

redux - 使用 redux 进行异步 React-select

我正在尝试使用 redux 制作一个异步反应选择组件,但不知何故无法在下拉列表中获得搜索结果。对此非常陌生。请帮忙 :)

此外,选项对象的格式也正确,并且在 redux 存储中正确更新,但没有反映在 select async 的下拉列表中。

0 投票
1 回答
376 浏览

reactjs - 如何解决从 react-select 加载 Select.Async 组件的问题?

我正在使用 react-select 中的 Select.Async 组件和 redux-form。我将加载选项函数传递给 Select.Async 并且该函数只发出一次请求。第一次调用时,它用 axios 发出一个 get 请求并返回所有选项。我遇到的问题是它第一次加载选项(获取它们)时,它首先显示它正在加载,就像它在图片中一样,但随后它会删除用户输入的内容并且不显示任何选项。用户第二次键入它会起作用,因为没有发出请求,但选项是从状态中获取的。

提前感谢您的帮助!

在此处输入图像描述

0 投票
2 回答
3625 浏览

reactjs - react-select 如何编辑创建的条目

我正在使用 Select.AsyncCreatable:

如何编辑我创建的选项。我可以删除创建的选项并重新输入它们,但是否有编辑选定值的选项?会更舒服。