用React JS构建的Select控件
找不到模块：错误：无法使用打字稿解析“react-select”
模块导入对我不起作用。我尝试了堆栈溢出和其他提供的不同解决方案。 这些是我遵循反应选择的步骤 npm install --save @types/react-select 重要...
当传递isMulti时，返回的数据是一个数组，当选定值中的一项被清除时，如何获取被清除的值？ 从截图来看，当“x”bu...
无法在CreatableSelect 上创建新的react-select
从“react”导入React； 导入从“react-select”中选择； 从“react-select/creatable”导入 CreatableSelect； const 自定义选择 = ({ 最大选择, 正在加载...
React-select 默认值未使用 React-i18next 进行翻译
我已设置选择组件如下 我已设置选择组件如下 <Select styles={customStyles} defaultValue={{ label: t('Text to be translated'), value: 'all' }} components={{ IndicatorSeparator: () => null, }} isSearchable={isSearchable} options={[ { value: 'val1', label: t('text 1') }, { value: 'val2', label: t('text 2') }, { value: 'val3', label: t('text 3') }, ]} onChange={handleSelectChange} isDisabled={disabled} /> my defaultValue 仅在首次加载组件时翻译。更改语言不会产生任何影响。文本以初始加载时选择的语言显示。但有趣的事实 - 选项的翻译完全没有问题 您应该将 key 作为参数传递给您的 Select 元素。确保它具有独特的价值，我认为来自 label 的 defaultValue 对它有好处。以下引用自官方文档 按键帮助 React 识别哪些项目已更改、添加或删除。 我面临着同样的问题。有什么办法可以解决这个问题吗？
如何从 React TextField Select 中删除箭头
我正在使用 TextField Select 作为下拉菜单。 尝试在选择上使用“components={{ DropdownIndicator:() => null}}”，但不起作用。 我正在使用 TextField Select 作为下拉菜单。 尝试在选择上使用“components={{ DropdownIndicator:() => null}}”，但没有成功。 <TextField disabled={true} label="itemNo" value={currentItem.itemNo} variant="outlined" InputLabelProps={{ style: { fontSize: 18, color: 'grey', backgroundColor: 'white', fontFamily: "monospace" }, shrink: true }} select > {this.state.itemNo && this.state.itemNo.map((item) => ( <MenuItem style={{ fontSize: 14, fontFamily: "monospace" }} key={item.key} value={item.id}> {item.key} </MenuItem> ))} </TextField> 要删除选择下拉图标，您必须在 IconComponent: () => null 中传递 SelectProps，应用于 Select 元素的 Pros。它接受选择元素 props 的对象 有关 select 道具的更多信息 https://material-ui.com/api/select/ 这是工作示例https://codesandbox.io/s/quizzical-frost-g4s52?file=/src/App.js <TextField disabled={true} label="itemNo" value={currentItem.itemNo} variant="outlined" InputLabelProps={{ style: { fontSize: 18, color: 'grey', backgroundColor: 'white', fontFamily: "monospace" }, shrink: true }} select // for passing props in select component SelectProps={{ IconComponent: () => null }} > {this.state.itemNo && this.state.itemNo.map((item) => ( <MenuItem style={{ fontSize: 14, fontFamily: "monospace" }} key={item.key} value={item.id}> {item.key} </MenuItem> ))} </TextField>
我的反应项目“react”：“^18.2.0”版本和“react-select”：“5.4.0”版本出现错误
我的react项目使用“react”：“^18.2.0”版本和“react-select”：“5.4.0”版本，今天出现错误，该项目一直运行顺利直到昨天...
在可搜索的反应选择下拉列表中呈现大量数据的最佳方法是什么？我研究过窗口化，其中仅为在视口中可见的项目创建 DOM 节点。这...
react-select：如何在检查器中设置样式时保持下拉列表打开？
我正在使用react-select并且正在自定义它，我没有找到执行此操作的选项。当我设计样式时，是否可以使用一些解决方法来保持下拉列表打开？
将 React Hook Forms 与 React Select 结合使用：无法在表单上触发 onChange
我们正在使用新工具重写我们的前端。其中一部分是 React Hook 形式。每当您进行更改时，我们的旧前端都会更新，因此为了提供类似的用户体验...
使用 Python 在 Selenium 中选择反应选择下拉列表中的项目
此处链接示例网站 在该网站中，我正在寻找如何在“单个”下拉框中和“分组”下拉框中选择项目（例如“绿色”）。 我尝试点击删除...
当使用react-select时，它不是按选项值自动调整大小，而是使用width:100%，如图所示： 选项很短： 获取选项() { 返回 [ { 值：'AND'，标签：'AND' ...
在react-select 2.0.0版本中将menuPortalTarget设置为document.body时无法选择以下选项
({ ...base, zIndex: 9999 }) }} menuPortalTarget={document.body} 可搜索 名称=“co...” <Select defaultValue={colourOptions[0]} isClearable styles={{ menuPortal: base => ({ ...base, zIndex: 9999 }) }} menuPortalTarget={document.body} isSearchable name="color" menuPosition={isFixed ? 'fixed' : 'absolute'}在此输入代码 menuPlacement={portalPlacement} options={colourOptions} /> 只需运行“MenuPortal”示例。 将位置设置为“固定”，并调整视口的大小。无法显示以下选项。看图片。如何解决呢？提前致谢！ 我也遇到同样的问题，请问你知道答案了吗？
我有一个选择组件，需要处理其中大约 7,000 个选项。我遇到两个问题。 1）当输入搜索参数时，加载速度太慢。 2）我需要
我不知道如何在聚焦时从反应选择中删除边框或轮廓（不确定是哪一个）。 上传图片供参考。我默认没有边框。 自定义样式 = { ...
我正在使用 React Select，并且有一个 API，我可以在其中获取国家/地区列表。 API中有256个国家代码。用户必须选择国家/地区。但是当菜单打开时屏幕冻结。
onChange 反应选择 isMulti Component
我正在使用反应选择。根据官方文档，我应该使用“isMulti”来获得多个选项。 这是我创建的组件。 从“反应”导入反应； 导入 { 表单 } f...
使用 menuPortalTarget 时如何修复反应选择下拉菜单的样式
当我使用 menuPortalTarget 时，它会破坏下拉列表中的样式。这是显示问题的代码和框。在codesandbox 中，我有一个按钮可以切换menuPortalTarget。当menuPortalTarget是...
我一直在尝试对 React-Select 组件实现虚拟化，尽管没有成功。我尝试使用的每个虚拟化软件包都存在某种严重故障......
我试图使我的反应选择组件中的第一个和最后一个选项始终显示在列表中。我不希望它在搜索过程中被过滤掉。有没有办法消除
react-select，除了第一个选项之外，选项没有渲染，但它不可见？当它转到我的 onSelectOption 时，整个数组都会消失
我从后端获得了一系列口味。 这是我的jsx： &... 我从后端获得了一系列口味。 这是我的jsx： <div className="mb-3"> <Select options={flavorOptions} onChange={onSelectOption} value={flavor} /> </div> 数组正在被格式化为反应选择所需的正确格式，如下所示： const flavorOptions = [ flavors.map(f => { return { value: f, label: f } }) ] 这是我的 onSelectOption 函数： const onSelectOption = (option) => { const copy = {...order} copy.flavor = option.value setOrder(copy) } 这就是 当我单击该选项（甚至不可见）时，第一个选项会显示，但是当 onChange 调用 onSelectOption 函数时，整个数组都会被发送进来。 所以我的问题实际上分为三个部分： 为什么只显示一个选项？ 为什么看不到？ 为什么将整个数组传递给 onSelectOption 函数，而不是仅传递选定的值？ 我尝试将这些道具 - getOptionLabel={option => option.label} getOptionValue={option => option.value} 添加到 Select 并得到相同的结果。 我也尝试过这个： <Select> {flavorOptions.map(flavor => { <option key={flavor.label} value={flavor.value} > {flavor.label}</option> })} </Select> 这导致收到“无选项”消息。 如果有人知道我可能做错了什么，我将非常感谢反馈。 我对反应和编程都很陌生，所以这很可能是一个粗心的错误。 根据您的代码片段，问题似乎在于您格式化flavorOptions数组的方式。 当前，您将flavors.map()函数包装在一个数组中，这会产生一个嵌套数组。这导致 Select 组件接收一个数组作为其 options 属性，而不是一个对象数组。 要解决此问题，您可以删除flavors.map()周围的方括号，这样flavorOptions数组就不会嵌套： const flavorOptions = flavors.map(f => ({ value: f, label: f })); 关于您的问题： 仅显示一个选项，因为 Select 组件需要一组对象作为 options 属性。通过如上所述修复flavorOptions数组格式，所有选项都应该出现。 可见性问题可能是由于 CSS 或样式冲突造成的。确保选择组件没有被页面上的其他元素隐藏或重叠。 整个数组将被传递给 onSelectOption 函数，因为只要所选选项发生更改，就会触发 Select 组件的 onChange 事件。要访问所选值，您可以在 onSelectOption 函数中使用 option.value，就像您当前所做的那样。 这是更新后的代码： <div className="mb-3"> <Select options={flavorOptions} onChange={onSelectOption} value={flavor} /> </div> const flavorOptions = flavors.map(f => ({ value: f, label: f })); const onSelectOption = (option) => { const copy = { ...order }; copy.flavor = option.value; setOrder(copy); }; 确保检查是否存在任何其他潜在问题，例如缺少导入或不正确的变量值。 只需删除此处的方括号即可： const flavorOptions = flavors.map(f => { return { value: f, label: f } }) 当你只需要[["apple", "banana"]]时，你传入的就像["apple", "banana"]一样 Stackblitz：https://stackblitz.com/edit/stackblitz-starters-wrswve?file=src%2FApp.tsx