用React JS构建的Select控件
使用react-select和react-hook-form返回正确的值
我正在使用react-hook-forms控制器api,围绕react-select中的AsyncSelect,在用户从外部API键入时加载选项。 一切正常,除了返回值回来了......
问题:箭头键滚动在带有反应窗口的反应选择中不起作用 我遇到一个问题,无法使用向上和向下箭头键滚动反应选择下拉列表
我想在一个字段中组合两个数组对象选项,使用reactJS中的select。这是我的代码: const DayOptions = [ { 值:'第 1 天', 标签:“第一天” }, { 值:“第 2 天”, 标签:“第二天” ...
我试图在反应选择的输入元素前面添加一个图标。我可以在占位符中获取图标,但占位符的问题是,当我从 dropdo 中选择一些数据时...
我在代码中使用 React Select 并尝试根据输入更新选项,但是即使在触摸下面的选择框后,我也面临着 [object Promise] 作为输入中的值的问题...
React-选择如何保持菜单打开/关闭的默认行为以及添加到单击按钮时打开的菜单?
我有一个react-select组件来在api上执行搜索,还有一个按钮来开始搜索。 我尝试在单击按钮后设置 menuIsOpen={true} 但它破坏了原始的焦点模糊行为...
自定义多选编辑器与 AG Grid getValue() 集成问题
从'react'导入React,{useState,useImperativeHandle,forwardRef,useRef,useEffect}; 导入从“react-select”中选择; 从“ag-grid-community”导入类型 { ICellEditorParams };
React-select:如果使用 onChange,isClearable 不起作用
单击 isClearable 中的 X 图标时,下拉列表会切换,而不是清除选项。如果我没有 onChange 属性,它会清除。
react-select:如何解决“警告:Prop `id` 不匹配”
我有一个带有 ReactJs 和 NextJs 的网络应用程序。在功能组件中,我使用了反应选择,然后收到以下控制台警告: 警告:道具 ID 不匹配。服务器:“反应-
当我在使用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} //... /> ) }
我正在使用react-select从api加载结果并使用lodash.debounce消除查询: 从'react'导入React,{useState}; 从 'react-select/lib/Async' 导入 AsyncSelect; 小鬼...
在react-select中使用自定义ValueContainer维护默认的打开/关闭行为
我需要稍微自定义一个反应选择下拉列表。 它是一个多选,我的目标是当用户选择多个选项时,所选选项只占用框中尽可能多的水平空间......
我在处理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; }
是否可以直接从浏览器使用react-select,而不需要 现在的捆绑商? 我发现能够这样做的最新版本是 2.1.2: 如何从 React-Select CDN 导入...
如何扩展 React Select 以在输入中永久显示输入标签?这是一个粗略的模型: 注意,我不想使用 'placeholder' 属性,因为我希望显示此标签
我正在尝试向我的反应选择组件添加一个编辑按钮(当前触发警报)。然而,这使得新添加的按钮无法点击;相反,它会打开反应选择菜单。
我正在尝试向我的反应选择组件添加一个编辑按钮(当前触发警报)。然而,这使得新添加的按钮无法点击;相反,它会打开反应选择菜单。
我正在为 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> );
受控组件在触发动作后也会重置“选择”。 但“输入”组件则不然。 “使用客户端”; 导入 { useActionState, useState } ...
我正在使用react-select包。 我想在react-select isMulti={true}中自定义芯片 我遇到的问题是我只能将一个自定义组件传递到react-