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({

在 react-select 的选项末尾添加一个按钮

我正在使用 react-select 库在我的项目中实现搜索和选择功能。 作为基本用法，我只能选择搜索后返回的选项。看起来像这样谁的代码...

React-select默认行为和自定义外观

我对react和react-select也很陌生。当我试图实现一个自定义的外观组件，我读了很多信息，但它是不那么用户友好的IMHO。我希望我的react-select组件......

如何为 react-select 设置自定义宽度

你好，有没有办法设置一个自定义宽度 在我的反应选择按钮？我想它，如果我可以使用bootstrap做到这一点，所以它可以是响应的，但如果没有它的好。这是我的代码：导入Select，{ ...

为什么 react-select 无法使用状态下的选项？

这段代码工作正常，因为选项在外面： import React from 'react'; import Select from 'react-select'; const options = [ { value: 'chocolate', label: 'Chocolate' }, { value: 'strawberry', ...

React-select 异步获取

我正在使用react和react-select，并尝试从api中获取选项。一切都很顺利，但我想在数据来自api的同时，显示加载到react-select的文本。这是我的react-...

语法 React-select with formik

嗨，大家好，我应该插入一个react-select与formik。我是新手，你能告诉我一个例子吗？我使用Formik"^2.1.2 "版本，和 "react-select"。"^3.0.8 "版本。我的错误是 TypeError: Cannot read..: 无法读取...

我如何在div内创建一个选择框，而不是下拉式的？

我想创建一个选择框，但我不想让它成为一个下拉框。我对某些表单的反应有点陌生。图片是我想做的事情的附件。

在react-select中进行程序化的聚焦和选值。

我希望能够以编程方式关注()和选择()一个反应选择。点击下面的添加新品牌：应该呈现这样的效果。这是我目前所做的 我的选择组件是...

当改变视图缺少选择值时，反应-选择

如何通过react-select async来保留选中的选项？我的意思是，我有以下组件，这是一个多步骤的形式里面，当我回到我使用AsyncSelect的部分，我......

在提交时，在react-hook-form中重设react-select的选择值？

我正在替换我的应用程序中的一些选择输入，使用react-select。在使用react-select之前，我在提交时使用.reset()函数清除表单中的选择选项，......