用React JS构建的Select控件
我正在尝试删除当我在反应选择的输入部分中单击或聚焦时显示的蓝色边框。 我用了 控制：（提供：任何）=>（{ ...假如， 背景：&q...
我在我的项目中使用了react-select包中的多选下拉列表。现在输入字段中的光标正在从 tailwind 基类获取 css，但我无法从我的...
我正在使用 Inertia.js 并且我一直很喜欢它。 无论如何，我遇到了一个我似乎无法弄清楚的问题。我有一个选择输入，其中包含数据库中的选项，但其中很多都是大约的。 ...
React-Select 在 Sweetalert2 中不起作用
我尝试在 Sweetalert2 中使用 React-Select 组件，但是当 sweetalert 在屏幕上弹出时，它会在控制台上抛出错误。附图包含错误描述 这是我的...
所以我使用的是Shadcn的表单组件，其中包含Input、Select和Checkbox组件。 输入和复选框组件工作正常，没有任何问题，这让我......
比如说，我想在菜单打开时将背景颜色应用于菜单列表。我通过执行以下操作实现了所需的控制效果（输入本身）： 比如说，我想在菜单打开时将背景颜色应用于菜单列表。我通过执行以下操作达到了控制（输入本身）所需的效果： <Select classNames={{ control: (state) => clsx({ [styles['control-focused']]: state.isFocused }) }} /> 我想对 menuList 组件执行相同的操作，但它的状态不会公开 isOpen 或 isFocused 属性。我该怎么做？ 就 isOpen 而言，我假设 MenuList 不会呈现，除非 isOpen 为 true 我的理解是专注... MenuList 无法聚焦。输入具有焦点，或者菜单列表中的任何单个选项都具有焦点。用户无法将焦点移至 MenuList 本身。 我认为更改 menuList 样式的唯一方法是为其传递自定义组件。 我在文档中看到 MenuList 公开了道具 focusedOption 和 options 因此，您需要从自定义 MenuList 组件中的该信息导出 MenuList 焦点状态 我修改了 Custom MenuItem 组件的文档示例来定义 isFocused var： import React from 'react'; import Select, { components, MenuListProps } from 'react-select'; const menuHeaderStyle = { padding: '8px 12px', background: 'coral', color: 'white', }; const MenuList = ( props: MenuListProps ) => { // not entirely sure about the internals of the props, but something like this should work const derivedIsFocused = options.some(opt => opt.id === props.focusedOption?.id); return ( <components.MenuList {...props}> {derivedIsFocused && <div style={menuHeaderStyle}>I'm so focused</div>} {props.children} </components.MenuList> ); }; export default () => ( <Select defaultValue={colourOptions[1]} options={groupedOptions} components={{ MenuList }} /> );
我正在使用反应选择下拉菜单，它在桌面模式下选择/取消选择选项时效果很好，但是一旦我切换到响应式屏幕，选项就可见，但当我尝试单击dro时...
React Hook Form 控制组件。两个输入作为一个值
我正在尝试创建一个组合组件/输入字段，其中包含一个下拉列表和简单的文本字段。 我假设我需要使用 React hook 表单中的 useController 选项，但这就像 f...
在react-select多选中选择一个选项时，默认行为是将下拉列表中的选项添加到输入中，并且所选选项从菜单中消失。 我该如何预防...
我有一张包含内容列表的表格。单击铅笔图标可以更新内容。虽然要编辑的值来自正常输入，但它们不会到达反应选择组件。 ...
我知道如何使用反应组件中的函数获取后端，但我需要一个下拉菜单，因此我在反应选择页面中找到了一个示例，但该示例是在类中制作的。 清洁前...
如何让react-select的AsyncSelect组件在选择后保留其值？
我有一个 AsyncSelect 组件，工作正常，只是在选择某些内容后，控件不会保留其值。它只是回到说“选择...” 以防万一'...
如何更改反应选择中所有元素的悬停？ 来源宿主：... 如何更改反应选择中所有元素的悬停？ <Select name="colors" options={colourOptions} className="basic-multi-select" classNamePrefix="select" /> 源主机：https://codesandbox.io/s/react-codesandboxer-example-8iq7b 要自定义您的选择，您可以使用道具styles。 此处列出了您可以更改的所有不同组件。 要专门针对 hover 状态，您应该使用以下模式： const styles = { control: base => ({ ...base, "&:hover": { borderColor: "red" } }) }; 还可以使用其他选项，例如每个 state 内的 components，具体取决于您想要实现的目标。 如果您希望所有元素的行为取决于 control 组件的状态，则必须编写如下内容： const styles = { control: base => ({ ...base, "&:hover": { borderColor: "red", color: "red" } }), dropdownIndicator: base => ({ ...base, color: "inherit" }), singleValue: base => ({ ...base, color: "inherit" }) }; 您可能还会终止动画ease，具体取决于效果的速度。您可以在此处查看实例。 styles={{ control: (base) => ({ ...base, border: `1px solid #e5e7eb`, borderRadius: "0.5rem", boxShadow: "none", "&:hover": { border: "1px solid #f6bf63cc", }, }), }}
如何才能将选中的值显示在输入框的正下方呢？ 使用案例： 我们正在使用react-select的多重选择，当我们从选择框中选择值时，它会出现在输入b中...
我不确定如何将颜色从默认的蓝色更改为其他颜色。示例代码位于下面的codesandbox 链接中。我尝试更改 root 的样式，但没有成功。 https://
如何将我的所有选项设置为默认选择，并且所有选项值应显示在多选反应选择的字段中
<Select components={animatedComponents} isMulti defaultValue={selectedClassOptions} value={selectedClassOptions} options={classOptions} onChange={(item) => setSelectedClassOptions(item)} className="generalSelect" isClearable={false} isSearchable={false} isDisabled={false} isLoading={false} isRtl={false} closeMenuOnSelect={false} placeholder="Class" styles={{ option: (provided, state) => ({ ...provided, borderBottom: "1px solid #F9F9F9", padding: "10px 15px", // Adjust padding as needed backgroundColor: state.isSelected ? "#f7f7f7" : "unset", }), menu: (provided, state) => ({ ...provided, padding: "10px", zIndex: 9999, borderRadius: "10px", // Adjust z-index as needed }), placeholder: (provided, state) => ({ ...provided, color: "#a8a8a8", }), }} /> <Select components={animatedComponents} isMulti defaultValue={selectedClassOptions} value={selectedClassOptions} options={classOptions} onChange={(item) => setSelectedClassOptions(item)} className="generalSelect" isClearable={false} isSearchable={false} isDisabled={false} isLoading={false} isRtl={false} closeMenuOnSelect={false} placeholder="Class" styles={{ option: (provided, state) => ({ ...provided, borderBottom: "1px solid #F9F9F9", padding: "10px 15px", // Adjust padding as needed backgroundColor: state.isSelected ? "#f7f7f7" : "unset", }), menu: (provided, state) => ({ ...provided, padding: "10px", zIndex: 9999, borderRadius: "10px", // Adjust z-index as needed }), placeholder: (provided, state) => ({ ...provided, color: "#a8a8a8", }), }} /> 在这里，我将根据该班级选择班级，我将动态获取学生选项，并且我希望每当我选择班级时，默认情况下都会生成学生选项，应在其中选择所有选项，并在另一个多选中显示值这个多选如何做到 defaultValue={selectedClassOptions} 不起作用？ <Select components={animatedComponents} isMulti defaultValue={selectedStudentOptions} // defaultValue to selectedStudentOptions options={selectedStudentOptions} // Use the selected options onChange={(selectedStudents) => setSelectedStudentOptions(selectedStudents)} className="generalSelect" isClearable={false} isSearchable={false} placeholder="Students" styles={{ option: (provided, state) => ({ ...provided, borderBottom: "1px solid #F9F9F9", padding: "10px 15px", backgroundColor: state.isSelected ? "#f7f7f7" : "unset", }), menu: (provided, state) => ({ ...provided, padding: "10px", zIndex: 9999, borderRadius: "10px", }), placeholder: (provided, state) => ({ ...provided, color: "#a8a8a8", }), }} /> 通过进行此修改，首先选择的学生选项将成为第二个 Select 组件的 defaultValue，从而在组件渲染时预先选择它们。
在版本 1.3.0 中，每次用户按下“,”键时，react-select 都会创建一个新标签，这很有用，因为在实现此库之前，我们有案例是用户将标签作为单个引入...
我在 React Select 中有一个下拉菜单，我面临焦点问题。每当我们打开下拉菜单时，选项列表中的第一项就会获得焦点。有几个道具已经过时了......
使用React Hooks的react-select（4.3.1）未选择默认值
我正在尝试从所选组件的数据列表中自动选择一个值。请帮忙。 也已经尝试过使用 isLoading 标志。 如果所选值在列表中可用...
嘿，我正在使用反应选择进行多重选择。我希望防止默认删除包生成的关闭选项。请参阅随附的打印屏幕 死亡图像 函数渲染器（obj，索引）{ ...