react-select 相关问题

Click 事件未在移动视图中的 React Select 中捕获

从“@/src/Components/Common/DatePicker”导入 DatePicker 从“@/src/Constants/AppPaths”导入{SEARCH_PAGE} 从“@/src/Constants/GenericCons 导入 { DATE_FORMATS }...

我们如何从数据库中检索保存的值以在反应中选择下拉列表？

我正在使用 React 和 Python 构建一个 Web 应用程序（后端） 该应用程序有一个标识符字段和几个要填写的下拉列表。这个应用程序有一个功能来保存

React-选择令人困惑的颜色选项

我正在使用 React-Select 库，并且有这样的代码： 我正在使用 React-Select 库，并且有这样的代码： <SortableSelect useDragHandle axis="xy" onSortEnd={onSortEnd} distance={4} getHelperDimensions={({ node }) => node.getBoundingClientRect()} isMulti options={selectableData} labelKey="username" onChange={onChange} components={{ MultiValue: SortableMultiValue, MultiValueLabel: SortableMultiValueLabel, }} className={classOfSelect} defaultValue={ selectableData && selectableData.length >= 2 ? [selectableData[0], selectableData[1]] : []} closeMenuOnSelect={false} /> 我已经阅读了官方文件，但是它不是很详细的文件，也找不到任何相关信息。 我怎样才能改变我的组件的颜色？ 为我的组件分配颜色。 我也有同样的问题。幸运的是，我在我的代码中添加了一些注释。 这些是： <SortableSelect theme={(theme) => ({ ...theme, borderRadius: "6px", colors: { ...theme.colors, primary25: 'gray', // Selectable options backgroundColor when hovered primary: 'green', //outer border,close and dropdown icon color when page focused neutral0:"red", //main container backgroundColor neutral20: "red", // outer border,close and dropdown icon color when page reloaded neutral60: "green", //outer border,close and dropdown icon color when elements hovered }, })} />

onChange 在 React 中的 react-bootstrap Modal 和 react-draggable 组件中的 react-select Dropdown 中不起作用

我在 React 项目中使用 react-select 库来呈现下拉选择框。我定义了一个选项数组，其中包含一个带有标签“a”的选项。我也定义了...

如何在打字稿中为 React-Select 定义 onChange 处理程序

我无法正确输入 onchange 函数。我创建了一个处理函数，但打字稿一直抱怨类型不匹配。 我的功能： 私有 handleChange（选项：Array<{label: s...

无法正确重置 react-select 的值和标签

我有一个带有反应选择标签的反应组件来过滤表格中的数据。 我想在某个事件时清除 select 标签的值和标签（我的意思是选择元素中显示的文本）

React-select 无法将 scss.module 识别为 className 和 classNamePrefix

嗨，我刚开始使用 react-select，当我尝试像这样应用 className={styles.select} 时，当我检查页面时，没有适用于它的类。另一方面，如果我把它设置成

react-select中的className不适用

我刚开始使用 react-select，当我尝试使用 scss 添加我的样式时，它们不适用，我知道有样式选项，您可以在其中设置选项样式和控件，但我想要一个清晰的...

我们可以将下拉指示器从左移到右吗？

我正在使用 React Select，这里的组件选项在向下箭头图标之前显示指示器 我想知道我们是否可以像下面那样从左到右切换 Indicator 的位置

react-select 添加边框红色

我正在使用 react-select，我正在尝试添加红色边框： 这是我的组件选择： 从“反应”导入反应； import ReactSelect, { GroupBase, Props } from "react-select";

为什么 ReactSelect 会导致输入对于输入的相同值具有相同的键？

我有一个使用 React Select 的多输入字段。 （{ 显示：'flex'...

添加删除按钮以删除 react-select-async-paginate 中的选项

SearchBar.js 从“@/src/hooks/useOptions”导入 useOptions； 从“反应”中导入反应，{useEffect}； 从“react-select-async-paginate”导入{AsyncPaginate}； c...

react-select 多选组件错误

我在使用 react-select 和 isMulti 道具时遇到困难。即使它是一个多选组件，当我选择一个选项时，react-select 表明没有其他选项......

Material UI - 选择带有结束装饰的菜单

是否有可能将 endAdornment 放入 MaterialUI 的选择菜单中？ 我想将内容添加到选择菜单上向下指针的右侧。 结束装饰={ 是否有可能将 endAdornment 放入 MaterialUI 的选择菜单中？ 我想在选择菜单的向下指针右侧添加内容 endAdornment={ <InputAdornment position="end"> <Insights /> </InputAdornment> <Select labelId="demo-mutiple-name-label" id="demo-mutiple-name" multiple value={fieldName} onChange={handleChange} input={<Input id="select-multiple-chip" />} renderValue={(selected) => ( <div className={classes.chips}> {selected.map((value) => ( <Chip key={value} label={value} className={classes.chip} /> ))} </div> )} MenuProps={MenuProps} > {field.map((field) => ( <MenuItem key={field} value={field} > {field} </MenuItem> ))} </Select> 我接受了哈维尔的回答，但风格有点不同。正如他提到的，Material UI Select 组件支持 endAdornment，但是，它不能很好地与 Select 箭头配合使用。主要问题是无论你放在那里，它都会重叠。 这是我如何做的一个例子。 首先，定义一个将应用于InputAdornment 元素的类。你只需要给它一些正确的填充，这样它就不会呈现在箭头的顶部： const useStyles = makeStyles((theme) => createStyles({ selectAdornment: { marginRight: theme.spacing(3), }, }) ); 然后只需将班级添加到您的InputAdornment中的Select <FormControl className={classes.rowInputRoot} error={!!error}> <Select labelId="id" value={selectValue} endAdornment={ <InputAdornment className={classes.selectAdornment} position="end"> <CircularProgress size={20} /> </InputAdornment> } > <MenuItem value="" selected> <em>Select</em> </MenuItem> {rowData.listValues?.map((value, i) => { return <MenuItem value={value[idPropName]}>{value.label}</MenuItem>; })} </Select> </FormControl>; 这将使装饰带有一点边距，以避免与选择箭头重叠。 我们可以使用带有<Select>的<TextField>代替<MenuItem>。 <TextField style={{ width: "100%" }} name="cls" select label="Items" helperText="Please select Class" margin="normal" variant="outlined" InputProps={{ endAdornment: ( <InputAdornment position="start">something</InputAdornment> ) }} > <MenuItem>Item 1</MenuItem> <MenuItem>Item 2</MenuItem> <MenuItem>Item 3</MenuItem> </TextField> ); 查看示例沙箱示例https://codesandbox.io/s/material-demo-forked-9vqb3?file=/demo.js 当前的 Material Ui Select Component 支持 endAdornment，但是，它不能很好地与选择箭头一起工作。 我做的是添加一个startAdornment，并添加一个makeStyles类，将装饰放在绝对位置，makeStyle类有以下内容： const useStyles = makeStyles((theme) => ({ selectAdornment: { "& .MuiButtonBase-root": { position: "absolute", padding: 0, right: "32px", top: "calc(50% - 12px)", }, }, })); 选择看起来像这样： <Select {...props} onChange={handleChange} startAdornment={ <InputAdornment position="start" className={classes.selectAdornment}> <IconButton> <Tooltip title="tooltip text"> <HelpIcon color="primary" /> </Tooltip> </IconButton> </InputAdornment> } /> 与此线程上的其他答案一样，Material UI Select Component 支持 endAdornment 和 startAdornment 但是，就像其他人提到的那样，选择箭头将与其重叠。 我的解决方案实际上是覆盖选择箭头的位置。 <Select labelId="id" value={selectValue} endAdornment={ <IconButton> <Tooltip title="tooltip text"> <HelpIcon color="primary" /> </Tooltip> </IconButton> } /> 然后，无论你有你的CSS，包括： .MuiSelect-icon { right: 40px !important; } 但这完全取决于您想要选择箭头的位置，因此请根据您想要选择箭头的位置来调整这些值。 这行得通吗？ <FormControl> <Select {...props}> {values.map((value) => ( <MenuItem key={value} value={value} > <Typography variant="inherit">{value}</Typography> <ListItemSecondaryAction> <IconButton edge="end" aria-label="delete"> <Check /> </IconButton> </ListItemSecondaryAction> </MenuItem> ))} </Select> </FormControl> 试试这个。 <Select onChange={onChange} endAdornment={ xVisible ? ( <div onClick={xClick} > <i className="bi bi-x-lg"></i> </div> ) : null } sx={{ "& .MuiSelect-iconOutlined": { display: xVisible ? "none" : "", }, "&.Mui-focused .MuiIconButton-root": { color: "primary.main", }, }} > <MenuItem value="10">Ten</MenuItem> <MenuItem value="20">Twenty</MenuItem> </Select> 对于任何其他尝试这样做的人——我还没有想出如何去做，但一个可能足够好的解决方法是将你想要的所有内容放在右对齐的 FormHelper 中的 endAdornment 中——这样它出现在表单域的输入框下方。

如何在外部单击时关闭我的反应选择？

const Filters= ({ label, placeholder, value, options, onChange}) => { 返回 （ {标签} ... const Filters= ({ label, placeholder, value, options, onChange}) => { return ( <FiltersStyled> <h4>{label}</h4> <div> <Select placeholder={placeholder} value={value} onChange={onChange} isClearable={false} options={options} isMulti closeMenuOnSelect={false} noOptionsMessage={() => ''} hideSelectedOptions={false} components={{ ValueContainer }} /> </div> </FiltersStyled> ) } const ValueContainer = ({ hasValue, children, getValue, ...props }) => { let [values, input] = children; if (Array.isArray(values)) { const { length } = values; if (getValue().length > 0 && getValue().length <= 3) { values = getValue().map(x => x.label).join(', ') } else { const otherCount = length - 3; values = getValue().slice(0, 3).map(x => x.label).join(', ') + ` + ${otherCount}` } } return ( <Select.components.ValueContainer {...props}> {values} {!hasValue && input} </Select.components.ValueContainer> ); } 这是我的 react-select 我创建了一个自定义容器，我的问题是当我用自定义容器在外面单击时它不会关闭我的 react-select 当我从 components={{ ValueContainer }} 到 components={ ValueContainer } 时，我的自定义组件不起作用，它向我显示初始组件 您可以通过创建一个 ref 和一个事件监听器来监听菜单外的点击来做到这一点 const App = ()=>{ const selectRef = useRef(null); useEffect(() => { document.addEventListener('mousedown', handleClickOutside); return () => { document.removeEventListener('mousedown', handleClickOutside); }; }); const handleClickOutside = (event) => { if (selectRef.current && !selectRef.current.contains(event.target)) { selectRef.current.select.clearValue(); } }; return ( <div> <Select ref={selectRef} options={options} /> </div> ); }

使用 react-select 过滤 react-table-v6 的问题

所以我必须使用react table v6。在桌子下面我用的是react-select。但是当我尝试过滤表中的数据时出现了问题。它只是行不通。我将向您展示请求的示例...

为什么 react-select 在使用自定义类型时会显示 TypeScript 警告以分配给选项属性？

我收到一条警告：对于我将 [p1] 分配给选项的行，类型 'Participant[]' 不可分配为类型 'readonly (Participant | GroupType)[]。 在使用 react-select 时用于以下

如何从 React Select Form 中获取价值

抱歉，只是一个基本问题，但我有点卡在这里，无法在做出选择后找到任何方法从 React Select 获取值。 这是一个简单的选择设置。 const selectOptions = [ ...

如何删除 react select 选项中的重复标签和值

我在添加时选择了选择它还添加了我已经添加的选项标签和值我不希望重复并且当它重复时选项看起来像0中的数组内部数组：标签...

react-select 2设置值/标签

我正在使用 react-select 2 并尝试在需要执行更新从服务器获取的某些数据的表单上设置值。 我尝试过解决方案： handleSelectChange(selectedOption){ this.setState({