react-select 相关问题

如何更改反应选择中所有元素的悬停？来源宿主：... 如何更改反应选择中所有元素的悬停？ <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", }, }), }}

reactjs react-select

回答 0 投票 0

在输入框之外渲染所选项目，以实现反应选择库的多选

如何才能将选中的值显示在输入框的正下方呢？使用案例：我们正在使用react-select的多重选择，当我们从选择框中选择值时，它会出现在输入b中...

reactjs react-select

回答 3 投票 0

如何更改反应选择颜色

我不确定如何将颜色从默认的蓝色更改为其他颜色。示例代码位于下面的codesandbox 链接中。我尝试更改 root 的样式，但没有成功。 https://

reactjs react-select

回答 3 投票 0

如何将我的所有选项设置为默认选择，并且所有选项值应显示在多选反应选择的字段中

<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，从而在组件渲染时预先选择它们。

reactjs react-select react-select-search react-multiselect-checkboxes

回答 0 投票 0

使用逗号在#react-select上创建新标签

在版本 1.3.0 中，每次用户按下“,”键时，react-select 都会创建一个新标签，这很有用，因为在实现此库之前，我们有案例是用户将标签作为单个引入...

javascript reactjs react-select

回答 2 投票 0

禁用 React-Select 中第一个选项的焦点

我在 React Select 中有一个下拉菜单，我面临焦点问题。每当我们打开下拉菜单时，选项列表中的第一项就会获得焦点。有几个道具已经过时了......

javascript reactjs react-select

回答 4 投票 0

使用React Hooks的react-select（4.3.1）未选择默认值

我正在尝试从所选组件的数据列表中自动选择一个值。请帮忙。也已经尝试过使用 isLoading 标志。如果所选值在列表中可用...