react-select 相关问题

下面我有一个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 }} />

javascript reactjs react-select

回答 0 投票 0

onBlur 重置反应选择中的值

我的反应选择有问题。当我在可搜索输入中输入一些文本并单击外部时，我的文本消失了。我尝试了 onBlur={() => input.onBlur({value: input.value})} 并且它工作正常...

reactjs redux onblur react-select

回答 1 投票 0

选项组件中缺少反应选择的默认值

我正在使用反应选择库。下面我使用文档创建了一个自定义选项组件。从“反应”导入反应；导入从“反应选择”中选择； const CustomOption = ({ innerProps, isDis...

javascript reactjs react-select

回答 1 投票 0

使用 Axios 进行动态 React 选择

我刚刚开始向我的 Ruby on Rails 前端添加一些 React。我有两个数据模型，称为咖啡豆和国家。我想在咖啡豆的表单上添加一个选择下拉列表

reactjs drop-down-menu axios react-select

回答 3 投票 0

如何使用react-select解决react-window高度问题？

我正在使用react-select和react-window，但下拉菜单的高度存在问题，例如：我只有两个值，但高度大于项目，我该如何修复它？来自 API 的下拉值...

javascript reactjs react-select react-window

回答 1 投票 0

在React中获取相互依赖的API时如何避免竞争条件？

我正在尝试使用React的react-select自定义组件更新选择，由于获取数据时发生竞争条件，我无法为其填充所选值。我...

reactjs typescript vite react-select react-typescript

回答 1 投票 0

react-hook-form react-select 数组字段在单击删除时不会保留其所选值

我得到了这个react-hook-form数组字段，其中每行都包含一个react-select输入元素，单击追加可以正常工作，但是当我单击任何行上的删除按钮时，所有选定的值...

reactjs next.js react-hook-form react-select

回答 1 投票 0

如何使用钩子清除TypeScript中react-select中的值？

我试过在SO中查看几个答案，但它们要么都是普通的javascript，根本不考虑Typescript，Javascript在没有类型的情况下工作正常，但TSX有点

reactjs typescript react-hooks react-select react-typescript

回答 1 投票 0

React-Select 的背景颜色

我将 React-Select 的背景更改为灰色，但它仍然有一些我想删除的白点。是否可以？在这里输入图片描述你可以看到上面有白色边框

reactjs react-select

回答 1 投票 0

如何减小React Select的大小

我想减小 React Select 的大小。这是我的代码，我尝试了下面的代码。但它不能正常工作， &l... 我想减小 React Select 的大小。这是我的代码， <div> <Select options={workflowStepAction} /> </div> 我尝试了下面的代码。但它无法正常工作， <div> <Select maxMenuHeight={190} options={workflowStepAction} /> </div> 我得到了答案。我认为以下是最小设置。我可以减少反应选择的hight。这是代码，我使用 TypeScript 来编写此代码。 const targetHeight = 30; const styles = { control: (base: any) => ({ ...base, minHeight: 'initial', }), valueContainer: (base: any) => ({ ...base, height: `${targetHeight - 1 - 1}px`, padding: '0 8px', }), clearIndicator: (base: any) => ({ ...base, padding: `${(targetHeight - 20 - 1 - 1) / 2}px`, }), dropdownIndicator: (base: any) => ({ ...base, padding: `${(targetHeight - 20 - 1 - 1) / 2}px`, }), }; <Select styles={styles} /> 我使用了 styles 属性： <Select defaultValue={selectedOption} onChange={setSelectedOption} options={options} menuPosition='fixed' menuPlacement='auto' styles={{ control: (baseStyles, state) => ({ ...baseStyles, minHeight: '25px', fontSize: '15px', }), dropdownIndicator: (base) => ({ ...base, paddingTop: 0, paddingBottom: 0, }), menuList: (base) => ({ ...base, fontSize: '12px', }), }} /> 您可以在此处找到要选择的组件名称：https://react-select.com/components dropdownIndicator 默认内边距为 8px，因此要降低高度，您必须将顶部/底部内边距设置为 0。我在组件 menuList 上使用 fontSize 来减小列表的字体大小，并使用属性 menuPosition 和 menuPlacement 来使菜单更接近缩小后的选择。要减小react-select v5的大小，请使用这个 sx={{height: 40}} 将 40 替换为您想要的高度，然后照此使用； <Select sx={{height: 40}} >

reactjs react-select

回答 0 投票 0

react-select 中的 onKeydown 事件

我正在使用react-select vserion 2组件。我希望能够在有人按下退格键时触发 OnKeyDown 事件。有谁知道该怎么做吗？

reactjs onkeydown react-select

回答 2 投票 0

在react-select中使用深色模式

我认为改变颜色的最好方法是使用主题道具或在文档中看起来像这样：从'../data'导入{flavorOptions}；导入从“反应选择”中选择；导出默认...

javascript reactjs react-select

回答 3 投票 0

如何在react-select multi中显示选定的选项？

我正在使用react-select和isMulti，有一个选项列表。如果与给定的数组值匹配，我想显示默认选择的几个选项。从“react”导入 React, { useState }; 我...