问题标签 [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 投票
6 回答
16556 浏览

reactjs - 如何修复反应选择下拉组件中搜索框的宽度?

我在我的反应应用程序中使用反应选择下拉组件。我发现了一个奇怪的问题,当用户开始在 react-select 下拉列表中输入搜索项目时,搜索文本框会被拉伸,并且它不是通过下拉列表固定的。

请看下图。如何修复搜索文本框宽度以响应选择宽度?

在此处输入图像描述

0 投票
1 回答
394 浏览

javascript - react-select-plus + 每个退格删除调用加载选项方法

如何调用每个退格键删除调用加载选项。我在每个输入更改方法调用 fetch 方法并获取数据中都使用 select.Async 控件,但是当我按退格键时,第一次调用了该加载选项方法,但下一次无法调用加载选项方法。

在上述加载选项中的代码中,获取用户方法调用。我的获取用户方法是:

当我第一次单击后退空间然后获取用户方法调用但在第二次我按下后退空间然后没有调用该获取用户方法时。如何调用每个退格删除调用此方法。

0 投票
1 回答
2627 浏览

reactjs - React-Select 多值不会像示例中那样填充所选项目

我正在尝试在我的应用程序中使用 react-select ( https://github.com/JedWatson/react-select ),我有一个选择框,其选项是动态加载的(即我调用后端来获取数据)。现在我可以看到在我的下拉列表中填充的所有选项,但是当我单击任何项​​目时 onChange() 事件有效,但该元素没有从下拉列表中取消填充,并且像官方示例中所示的标记一样显示在顶部. 我的选择框:

这在 UI 上显示了我:

在此处输入图像描述

在这里,我已经从列表中选择了两个元素,但它们没有显示在顶部,如下例所示:

在此处输入图像描述

我在我的组件中导入了 js 和 css,如下所示:

更新

添加多个项目时: 在此处输入图像描述

0 投票
1 回答
364 浏览

reactjs - react-select 不允许在搜索文本中使用星号(*)进行搜索

当我在其中搜索带有星号(*)字符的数据时,ajax 返回结果,但它不会显示在选择列表中。

例子:

我有通过starts_with搜索的搜索引擎,对于部分搜索,我需要在字符串前面添加星号(*)。

  • 苹果
  • 菠萝
  • 结痂的苹果
  • 覆盆子
  • 黑莓

如果我搜索App它返回以下结果

  • 苹果
  • 结痂的苹果

Pineapple包含在列表中,我需要在苹果前面添加星号,例如*apple

当我添加星号(*)时,ajax 调用返回结果,但结果未显示在列表中。

0 投票
1 回答
219 浏览

reactjs - 将 react-select-plus 与 redux saga 一起使用

我正在使用 react-select-plus 和 redux saga 来处理异步选项。我的组件是这样定义的

当我输入字母时,正在调用服务并且我的状态已成功更新。我的问题是我的下拉列表没有用我的状态的新值刷新。我试过 isLoading 但没有用。你有什么想法为什么会发生这种情况?我再次说我的状态已正确更新。我只能看到包含我的状态更新值的列表。在文档中还说要在外部加载异步选项,请使用 isLoading={true} 但它也不起作用

0 投票
1 回答
602 浏览

reactjs - React 无法将 undefined 或 null 转换为对象

我正在使用 react-select 并且我有两个多选下拉元素。我已宣布我的状态如下:

我有两个功能可以添加从我的多选下拉列表中选择的语言/市场:

我的选择框:

我通过调用后端来填充我的下拉列表。现在的问题是我可以从任何一个框中进行选择,当我从其他框中选择一个值时,它会抛出错误消息:无法将未定义或 null 转换为对象。

为什么会这样?我究竟做错了什么?

0 投票
1 回答
1453 浏览

javascript - 我可以更改 react-select (#react-select) 中的下拉菜单颜色吗?

我可以更改 react-select (#react-select) 中的下拉菜单颜色吗?我实际上想将 .Select-menu-outer 设为黑色和白色文本,将 .Select-menu 设为灰色和白色文本

0 投票
2 回答
2718 浏览

react-select - 异步填充反应选择

鉴于在 react-select ( https://jedwatson.github.io/react-select/ ) 中进行的选择,我正在使用 axios ( https://github.com/mzabriskie/axios ) 从远程 url 中获取数据为了在页面上填充第二个 react-select。

诀窍是我认为我的用例与 Async 示例不同的地方在于,我不希望用户必须在第二个选择中键入以触发自动填充。我希望当数据从 AJAX 调用返回时立即发生自动填充

我已经确认我正确地获取了远程数据,但是我不能完全弄清楚loadOptionsreact-select 参数的正确语法。代码中与我想要的最接近的示例是项目示例中的此函数

https://github.com/JedWatson/react-select/blob/master/examples/src/components/GithubUsers.js#L36

感谢您提供的任何提示

0 投票
1 回答
1145 浏览

react-select - React-Select 1.0.0-rc.5 - 选择选项后单击内部时无法打开选择

我使用最新版本(1.0.0-rc.5)从react-select 库中实现了 Select 组件。

我可以单击 Select 元素打开列表。我选择一个值,它会关闭列表并显示我选择的值。但是,当我再次单击该元素以显示选项列表时,什么也没有发生。它只会在我点击离开后打开列表(可能在模糊事件之后)。

我尝试通过使用 autoBlur={true} 属性来解决这个问题,但我无法在 IE 11 中切换到页面上的下一个元素。

我确实注意到演示页面上没有发生这种情况,它仍然使用版本 0.9.1。

有谁知道为什么会这样?

编辑

这是我班的一个样本

这是实现类的页面

0 投票
1 回答
1693 浏览

javascript - 在 react-select 中输入一个字符后,我可以使下拉菜单可见吗?

我正在使用react-select React 组件来显示自动完成输入字段。

在关注 react-select 组件输入字段时,它将显示我不想要的所有可用选项,因为数据集的长度为数千。我只想在用户输入至少一个字符时显示选项。有没有办法做到这一点?或者这是我应该提出的功能要求吗?

提前致谢。