react-select 相关问题

用React JS构建的Select控件

使用react-select和react-hook-form返回正确的值

我正在使用react-hook-forms控制器api,围绕react-select中的AsyncSelect,在用户从外部API键入时加载选项。 一切正常,除了返回值回来了......

回答 9 投票 0

箭头键滚动在带有反应窗口的反应选择中不起作用

问题:箭头键滚动在带有反应窗口的反应选择中不起作用 我遇到一个问题,无法使用向上和向下箭头键滚动反应选择下拉列表

回答 1 投票 0

如何在一个字段选择下拉列表中组合两个数组选项

我想在一个字段中组合两个数组对象选项,使用reactJS中的select。这是我的代码: const DayOptions = [ {   值:'第 1 天',   标签:“第一天” }, {   值:“第 2 天”,   标签:“第二天” ...

回答 1 投票 0

在react-select中的input元素前添加图标

我试图在反应选择的输入元素前面添加一个图标。我可以在占位符中获取图标,但占位符的问题是,当我从 dropdo 中选择一些数据时...

回答 2 投票 0

反应选择选项更新给出[对象承诺]

我在代码中使用 React Select 并尝试根据输入更新选项,但是即使在触摸下面的选择框后,我也面临着 [object Promise] 作为输入中的值的问题...

回答 1 投票 0

React-选择如何保持菜单打开/关闭的默认行为以及添加到单击按钮时打开的菜单?

我有一个react-select组件来在api上执行搜索,还有一个按钮来开始搜索。 我尝试在单击按钮后设置 menuIsOpen={true} 但它破坏了原始的焦点模糊行为...

回答 5 投票 0

自定义多选编辑器与 AG Grid getValue() 集成问题

从'react'导入React,{useState,useImperativeHandle,forwardRef,useRef,useEffect}; 导入从“react-select”中选择; 从“ag-grid-community”导入类型 { ICellEditorParams };

回答 1 投票 0

React-select:如果使用 onChange,isClearable 不起作用

单击 isClearable 中的 X 图标时,下拉列表会切换,而不是清除选项。如果我没有 onChange 属性,它会清除。

回答 3 投票 0

react-select:如何解决“警告:Prop `id` 不匹配”

我有一个带有 ReactJs 和 NextJs 的网络应用程序。在功能组件中,我使用了反应选择,然后收到以下控制台警告: 警告:道具 ID 不匹配。服务器:“反应-

回答 6 投票 0

类型“ForwardedRef<HTMLInputElement>”不可分配给类型“LegacyRef<Select<Option, false, GroupBase<Option>>> |不明确的'。在反应选择中

当我在使用react-select 时在Select 组件中使用forwardRef 时,出现此TypeScript 错误。 类型“ForwardedRef”不可分配给类型 '旧版参考 当我在使用 React-Select 时在 Select 组件中使用forwardRef 时,出现此 TypeScript 错误。 Type 'ForwardedRef<HTMLInputElement>' is not assignable to type 'LegacyRef<Select<Option, false, GroupBase<Option>>> | undefined'. import Select from "react-select"; export const SelectInput = forwardRef<HTMLInputElement, SelectInputProps>( (props, ref) =>{ ... return( <div> <Select key="random-key" ref={ref} .... /> </div> ) } ) 我使用了相同的类型和带有输入元素的forwardRef,一切似乎都很好,但我在这里遇到了问题。我已经尝试了几种解决方案,例如这个 useRef TypeScript - 不可分配给类型 LegacyRef 它对我不起作用。 这是错误的完整日志 Type 'ForwardedRef<HTMLInputElement>' is not assignable to type 'LegacyRef<Select<Option, false, GroupBase<Option>>> | undefined'. Type '(instance: HTMLInputElement | null) => void' is not assignable to type 'LegacyRef<Select<Option, false, GroupBase<Option>>> | undefined'. Type '(instance: HTMLInputElement | null) => void' is not assignable to type '(instance: Select<Option, false, GroupBase<Option>> | null) => void | (() => VoidOrUndefinedOnly)'. Types of parameters 'instance' and 'instance' are incompatible. Type 'Select<Option, false, GroupBase<Option>> | null' is not assignable to type 'HTMLInputElement | null'. Type 'Select<Option, false, GroupBase<Option>>' is missing the following properties from type 'HTMLInputElement': accept, align, alt, autocomplete, and 352 more. 想找到更简单的方法吗?像这样摆脱forwardRef组件 export const SelectInput = <Option, IsMulti extends boolean = false, Group extends GroupBase<Option> = GroupBase<Option>>({ id, name, className, //...other select input properties ...props, }: SelectInputProps<Option, IsMulti, Group> & { myRef: React.Ref<HTMLDivElement> }) => { return ( <div> <Select key="random-key" ref={props.myRef} //... /> </div> ) } 用途: interface OptionType { // convert into your own type id: number name: string } const ParentComponent = () => { const selectRef = useRef<HTMLDivElement>(null) useEffect(() => { if (selectRef.current) console.log("select component: ", selectRef.current) }, []) return ( <Select<OptionType> myRef={selectRef} options={options} //... /> ) }

回答 1 投票 0

react-select 去抖异步调用不显示建议

我正在使用react-select从api加载结果并使用lodash.debounce消除查询: 从'react'导入React,{useState}; 从 'react-select/lib/Async' 导入 AsyncSelect; 小鬼...

回答 7 投票 0

在react-select中使用自定义ValueContainer维护默认的打开/关闭行为

我需要稍微自定义一个反应选择下拉列表。 它是一个多选,我的目标是当用户选择多个选项时,所选选项只占用框中尽可能多的水平空间......

回答 1 投票 0

如何隐藏react-select多值输入容器?

我在处理react-select多选时面临以下问题: 基本上,它会渲染一个额外的 ,其中包含实际的输入元素。我想做的是... 在处理react-select多选时,我面临以下问题: 基本上,它会渲染一个额外的 <div>,其中包含实际的输入元素。我想做的是当 select 本身不处于聚焦状态时隐藏它。 我尝试了不同的方法,但没有一个起作用: 首先,我尝试在 isHidden 组件本身上将 Input 设置为 true: import { useState } from "react"; import { components } from 'react-select'; export const Input = (props) => { const [isHidden, setIsHidden] = useState(true); const showInput = () => { setIsHidden(false) }; const hideInput = () => { setIsHidden(true) }; return <components.Input {...props} isHidden={isHidden} onFocus={showInput} onBlur={hideInput} /> } 它不起作用,因为它只隐藏闪烁的光标,而不是实际需要的 input-container div。 然后我尝试设置InputContainer的样式,但是React Select不会将它公开为一个单独的组件,因此不可能向它传递任何样式。 最后,我尝试通过将 ref 传递给 Input 组件来获取对它的引用,然后执行类似 的操作 import { useRef} from "react"; import { components } from 'react-select'; export const Input = (props) => { const inputRef = useRef(null); const hideParent = () => { cons inputContainer = ref.current.parentElement; // modify DOM somehow }; return <components.Input {...props} ref={inputRef} /> } 它也不起作用,因为它不是 forwardRef 组件,无法传递 ref。 考虑到上述所有因素,我如何隐藏这个输入容器? 我刚刚看了官方文档中的演示,我认为可以对input-container进行样式设置。 // hide the element when not focused .select__control .select__input-container { display: none; } // recover the original style when focused .select__control.select__control--is-focused .select__input-container { display: inline-grid; }

回答 1 投票 0

是否可以在浏览器中从cdn使用react-select?

是否可以直接从浏览器使用react-select,而不需要 现在的捆绑商? 我发现能够这样做的最新版本是 2.1.2: 如何从 React-Select CDN 导入...

回答 3 投票 0

如何在 React-Select 输入中添加永久标签?

如何扩展 React Select 以在输入中永久显示输入标签?这是一个粗略的模型: 注意,我不想使用 'placeholder' 属性,因为我希望显示此标签

回答 2 投票 0

自定义单值按钮不可点击

我正在尝试向我的反应选择组件添加一个编辑按钮(当前触发警报)。然而,这使得新添加的按钮无法点击;相反,它会打开反应选择菜单。

回答 1 投票 0

反应选择自定义单值按钮不可点击

我正在尝试向我的反应选择组件添加一个编辑按钮(当前触发警报)。然而,这使得新添加的按钮无法点击;相反,它会打开反应选择菜单。

回答 1 投票 0

React-Select 自定义组件不适用于输入

我正在为 React-Select 创建一个自定义组件,为选项添加一个按钮。 const customSingleValue = ({ 数据 }) => ( ... 我正在为 React-Select 创建一个自定义组件,为选项添加一个按钮。 const customSingleValue = ({ data }) => ( <div className="custom-single-value"> <span> {data.label} </span> <button>Click me</button> </div> ); <Select className="dropdown" options={fruitOptions} components={{ SingleValue: customSingleValue }} /> 但是,我无法将其与 React-Select 的输入/搜索功能集成。该按钮显示在单独的行上,但我希望它与输入/搜索保持在同一行。此外,我希望当用户开始输入时,自定义组件的基本功能被输入/搜索覆盖/隐藏。 问题: 如何确保我的自定义组件与输入/搜索保持在同一行,并在用户开始输入时被输入/搜索替换,与默认行为相同? 完整代码: import Select from "react-select"; const DropdownTest = () => { const fruitOptions = [ { value: 'apple', label: 'Apple' }, { value: 'banana', label: 'Banana' }, { value: 'cherry', label: 'Cherry' }, { value: 'date', label: 'Date' }, { value: 'fig', label: 'Fig' } ]; const customSingleValue = ({ data }) => ( <div className="custom-single-value"> <span> {data.label} </span> <button>Click me</button> </div> ); return ( <div className="dropdown-container"> <Select className="dropdown" options={fruitOptions} components={{ SingleValue: customSingleValue }} /> </div> ); }; export default DropdownTest; 利用 props 传递现有信息。您还可以利用孩子来代替数据。 const customSingleValue = ({children, ...props}) => ( <components.SingleValue {...props}> <div className="custom-single-value"> {children} {/* <span>{props.getValue()[0].label} </span> */} <button>Click me</button> </div> </components.SingleValue> );

回答 1 投票 0

受控<select>组件,正在以React 19

受控组件在触发动作后也会重置“选择”。 但“输入”组件则不然。 “使用客户端”; 导入 { useActionState, useState } ...

回答 1 投票 0

如何在react-select中实现多个自定义组件

我正在使用react-select包。 我想在react-select isMulti={true}中自定义芯片 我遇到的问题是我只能将一个自定义组件传递到react-

回答 1 投票 0

© www.soinside.com 2019 - 2024. All rights reserved.