用React JS构建的Select控件
当使用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
我尝试在代码中使用react-select，但我不断收到此错误： 错误：无效的挂钩调用。钩子只能在函数组件的主体内部调用。这可能发生在一个...
useState 不会立即更新状态。 我正在使用反应选择，我需要加载根据请求结果选择的（多个）选项的组件。 为此，我
如何在 React-Select 中公开所选选项，使其显示“X 选项已选择”，而不是在选择框中显示所选选项？
React-select 是一个很棒的工具，但现在我正在努力解决我自己造成的问题（过度销售的问题）。 React select 提供了什么： 它列出了
从所选项目中删除项目时如何捕获react-select中的删除事件？
首先，感谢您的出色工作。这对我来说更容易。那么在这里我想捕获删除事件，我该怎么做呢？我阅读了文档，但找不到删除事件
ReactSelect V2和V3似乎有几个props，例如clearValue，resetValue和setValue。无论我尝试什么，我都无法以编程方式清除选择。 resetValue 好像不是
使用 className 属性时遇到问题。 对我来说发生的事情是，只有父级 div 获得了课程，而子级 div 没有。结果，它们最终的背景颜色为白色......
下面我有一个react-select组件，标签为+{ctryCode}{ctryName} 下面我有一个react-select组件，标签为+{ctryCode}{ctryName} <Select options={countryProvinceCityList} value={telCtryObj} onChange={handleTelCountryChange} getOptionValue={(x) => x.telCode} getOptionLabel={(x) => '+' + _.padEnd(x.telCode, 5, '\u2007') + x.desc]} /> 选择一个选项后，我想更改其标签 +{ctryCode}{ctryName} 到 +{ctryCode} ，例如从“+1 美国”到“+1” 而可用选项标签保持不变。 我怎样才能做到这一点？预先感谢。 结果用以下代码覆盖了组件： const SingleValue = props => ( <components.SingleValue {...props}> +{props.data.telCode} </components.SingleValue> ); <Select ... ... components={{ SingleValue }} />
我的反应选择有问题。当我在可搜索输入中输入一些文本并单击外部时，我的文本消失了。 我尝试了 onBlur={() => input.onBlur({value: input.value})} 并且它工作正常...
我正在使用反应选择库。下面我使用文档创建了一个自定义选项组件。 从“反应”导入反应； 导入从“反应选择”中选择； const CustomOption = ({ innerProps, isDis...
我刚刚开始向我的 Ruby on Rails 前端添加一些 React。 我有两个数据模型，称为咖啡豆和国家。 我想在咖啡豆的表单上添加一个选择下拉列表