将react-select Async与loadOptions和redux-form配合使用

文章/答案/技术大牛

发布

2回答

forms、reactjs、select、redux、react-select

我正在使用react-select库来显示一个选择框。我之所以使用Select.Async，是因为我需要从API中提取选项。我在loadOptions中使用Select，它在初始页面渲染期间工作。但是，我也在使用redux-form，它可以动态地更改Field的值(使用change)。然而，当我像这样改变字段的值时，输入的值确实改变了(我可以验证这一点)，但是react-select的loadOptions<

浏览 3提问于2017-07-29得票数 2

1回答

在异步选择失去焦点后，如何保持选项状态？

javascript、reactjs、react-select

使用'react-select‘组件时，我遇到了选项状态的问题。在'blur‘事件之后，选项被设置为默认选项，但是inputValue仍然被设置。如何避免这样的期权重置？"react“16.8.6 "react-select”2.4.2 我根据文档为组件提供了所有的支持，包括loadOptions返回Promise，它解决了选项列表，defaultOptions为true，cacheOptions为true，inputValue来自我的组件的状态，onInputChange在除‘in

浏览 15提问于2019-07-05得票数 2

回答已采纳

1回答

如何设置事件侦听器用于搜索输入更改使用？

javascript、reactjs、react-select

相反，我将等待用户开始在下拉搜索栏中搜索，一旦数据缩小到可呈现的大小，下拉显示。import Select from 'react-select'; constructor(props) { this.state = { selected: '',

浏览 5提问于2020-09-05得票数 2

回答已采纳

3回答

在react js中的useEffect之后没有设置状态

javascript、reactjs

我的react应用程序中有下一个组件：import React, { useEffect, useState } from "react";import { ColourOption, colourOptions } from ".useEffect，然后在loadOptions中阅读了state。现在，当我打开select时，这些选项不会出现，但是当我将l

浏览 9提问于2021-12-14得票数 0

1回答

在react中触发loadOptions* --单击“选择/异步”选项*

javascript、reactjs、react-select

我有一个异步react-select组件import Async from "react-selectonKeyDown} /> );我在另一个组件中使用此组件从输入值加载数组和筛选

浏览 4提问于2020-07-09得票数 0

回答已采纳

2回答

在React Select中高效地呈现大型数据列表

reactjs、react-select、react-window

这可以通过使用react-window包和react-select来完成。然而，我想知道是否有比这更好的方法。这是使用react-window和react-select的窗口实现import ReactDOM from "react-dom";import

浏览 42提问于2020-06-02得票数 2

1回答

如何将确认事件“注入”到react-select？

reactjs、react-select

我正在使用这个项目的选择组件。我用它来呈现一个多选组件。以下是示例代码： className="user-selectthis.state.defaultValue} isClearable={fal

浏览 0提问于2018-10-06得票数 0

1回答

反应-选择异步多选择:如何设置默认的选定值？

reactjs、next.js、react-select、react-hook-form

如何设置React-select Async Multi-select默认值？这是我的form使用react-hook-form和react-select placeholder={"Select Users"}

浏览 2提问于2022-03-09得票数 0

1回答

result -当搜索结果为空时，选择异步显示错误

reactjs、react-select

使用我的代码，如果我搜索的内容有结果，它可以正常工作，但是如果没有结果，我将得到props.options.map is not a function错误。误差如果有任何相关的结果，这就是API返回的内容：如果找不到结果，API将返回如下内容：SearchUserDropdown.jsimport AsyncSelect from 'react-select/async'

浏览 7提问于2021-09-18得票数 0

回答已采纳

2回答

为什么我不能使用省略的AsyncProps的反应-选择？

reactjs、typescript、react-select

我一直在尝试将组件SelectSearchResult从react-select包装到AsyncSelect中。除了一些例外，我希望我的自定义组件的支持与AsyncSelect几乎相同。import AsyncSelect, { Props as AsyncSelectProps } from "react-select/async"; // works, but Props allowstype Props = Omit<AsyncSelectP

浏览 0提问于2020-03-11得票数 0

回答已采纳

2回答

取消反弹react-select* graphql查询*

javascript、reactjs、graphql、react-select、debouncing

我正在尝试去掉我的react-select组件发送的graphql查询。我使用的是wonka而不是rxjs，但是没有wonka的标签。client.executeQuery(createRequest(query, { input }))), take(1), ); }; React-select有一个调用我的graphql查询的loadOptions函数。(例如，如果我键入"rent"，它将搜索"r“、"

浏览 49提问于2020-01-11得票数 1

回答已采纳

1回答

反应-选择分页不取卷轴上的数据。

javascript、node.js、reactjs、pagination、react-select

我使用的是react select，通过Node从数据库中获取了20,000多个选项。页面甚至没有加载。现在，我添加了“react select-异步分页”。但数据只获取一次。import React, { useRef, useState, useEffect } from "react";import/LoadOptions"; import { AsyncPaginate } from "rea

浏览 5提问于2022-07-11得票数 0

2回答

异步填充react-select

react-select

给定在react-select ()中进行的选择，我使用axios ()从远程url抓取数据，以便填充页面上的第二个react-select。诀窍是，我认为我的用例与异步示例的不同之处在于，我不希望用户必须在第二个select中键入内容来触发自动填充。我希望当数据从AJAX调用返回时，自动填充立即发生我已经确认我正确地获取了远程数据，但是我不能确定react-select的loadOptions参数的正确语法。

浏览 16提问于2017-07-18得票数 1

3回答

react-选择取消的异步调用不显示建议

javascript、reactjs、react-select

我使用从api加载结果，并使用消除查询的抖动。import React, {useState} from 'react';import debouncevalue => { }; <AsyncSelect

浏览 0提问于2019-03-09得票数 10

1回答

保持redux-form状态下react-select组件的值和标签

javascript、reactjs、redux-form、react-select

react-select中的选择组件同时保持label和value值的状态。到目前为止，我看到的关于将该组件集成到redux-form表单中的建议，建议用从父redux-form组件隐式传递的行为来覆盖默认的react-select onChange和onBlur行为。=> this.props.input.onBlur(this.props.input.value)} }我想从MongoDB存储中填充<Select &#

浏览 1提问于2018-06-08得票数 0

2回答

反应异步选择

reactjs、react-select

我正在与异步选择从react-select中选择进行斗争。我成功地显示了一些defaultOptions，并使用承诺和loadOptions支柱对其选项进行了异步获取。我正在使用react-select team 提供的以下代码谢谢你的帮助!

浏览 1提问于2018-11-20得票数 8

回答已采纳

3回答

升级时反应选择错误: TypeError: dispatcher.useInsertionEffect不是一个函数

reactjs、typescript、next.js、react-select

例如，我想做一个非常基本的可创建的选择： return ( cacheOptions loadOptions我收到的错误如下：我使用nextj

浏览 15提问于2022-03-30得票数 9

回答已采纳

1回答

在select中添加新选项而不更新

javascript、reactjs、react-hooks、react-select

如何将选项显式地添加到组件中，点击add选项，我无法更新选项，但是状态正在更新!！还有其他方法可以实现这一点吗？/styles.css"; const optionsData: "Winter", label: "Winter" } const [options, setOpti

浏览 4提问于2021-07-03得票数 0

回答已采纳

2回答

从react中的另一个组件更新组件

javascript、reactjs、components

我有一个组件"QuickLaunch“，其中包含2个组件:一个基于反应选择的组件"MySelect”和一个自定义数据表组件( datatable )。我需要的是向react-select组件添加一个项(就像我在react-select组件中选择了一个项一样)，但是当我单击表中的一行时。我知道如何使用自定义组件做到这一点，但我不能使用react-select来精确地做到这一点，因为我不想修改包的源代码。这是可能的吗？Select.AsyncCreatable : Sel

浏览 0提问于2017-09-20得票数 3

1回答

在Select.Aysnc中使用optionRenderer (按住react键并选择)

javascript、reactjs、react-select

我在文档中找不到如何通过react-select async (Select.Async)使用optionRenderer属性下面是我的代码片段： {option.label}: {option.value} ) <Select.Asyncplaceholder={placeholde

浏览 2提问于2020-03-11得票数 3

回答已采纳

点击加载更多