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 }; 我...

javascript reactjs react-select

回答 2 投票 0

react-select 处理 onChange 与 props

我在子组件中使用react-select，但希望将 Select 值存储在父组件的状态中。我很感激我必须将 onChange 存储在状态中，然后将其传递给 Select va...

javascript reactjs react-select

回答 1 投票 0

为什么react-select焦点总是移动到第一个元素？

为什么react-select的焦点总是移动到第一个元素，即使光标在另一个选项中？我目前正在使用版本“react-select”：“^4.3.0”，为什么即使光标在另一个选项中，react-select焦点总是移动到第一个元素？我目前正在使用版本“react-select”：“^4.3.0”， <Select defaultValue={[options[4], options[5]]} name="clothes" options={options} isMulti onChange={handleChange} /> 我该如何解决这个问题？我也遇到同样的问题，请问你解决了吗？

css reactjs react-select

回答 0 投票 0

排查 React-Select 异步集成中的 TypeScript 错误

我非常感谢您针对过去几天遇到的问题提供帮助。我目前正在利用一个名为“react-select”的第三方库来创建一个选择下拉列表...

javascript reactjs typescript react-select

回答 1 投票 0

React-选择当数据约为 10000 时打开下拉菜单需要时间

我正在使用react-select，但是如果数据大约为10000，下拉列表需要时间才能打开。我怎样才能解决这个问题？代码沙盒

javascript reactjs react-select

回答 1 投票 0

反应选择 zindex 不起作用且 menutarget 未定义

我使用react select dropdown并用它来制作zindex： menuPortalTarget={document.body} 样式={{ menuPortal: 基=> ({ ...基, zIndex: 9999 }) }} 我也尝试过这个

reactjs react-select

回答 1 投票 0

React-选择通话时间以在数据约为 10000 时打开下拉列表

我正在使用react-select，但是如果数据大约为10000，下拉列表就需要打开了。我怎样才能解决这个问题？代码沙箱感谢您的努力！

javascript reactjs react-select

回答 1 投票 0

自定义反应选择可创建选择组件和reach-hook-form打字稿错误

我有一个使用react-select的自定义组件。这使用了 Createable Select，看起来像：从“react-select/creatable”导入 CreatableSelect；进口 { 动作元，

reactjs typescript react-hook-form react-select

回答 1 投票 0

如何更改输入值周围的圆环样式 - React-Select

我想在获得焦点时或选择/输入一个值并将其显示在我的 React-Select 组件的选择输入框中时消除光标周围的环。我可以改变造型...

javascript css reactjs react-select

回答 1 投票 0

输入文本反应选择时出现意外的蓝色边框

当我输入文本时出现意外的蓝色边框。请检查图像。我尝试通过将边框设置为零或无边框来编辑控件样式，甚至删除 boxShadow。但没有任何效果。请检查...

reactjs react-select

回答 3 投票 0

如何使用react-select聚焦于输入字段？

我正在使用react-select处理这个下拉列表，其中有一个输入字段可以进行搜索。无论如何，我有以下问题： 1）我应该专注于一个c中的输入字段...

javascript reactjs typescript react-select

回答 1 投票 0

React-Select：向输入添加自定义数据属性

我使用ReactJS v18.2和react-select v5.7。我想将自定义属性（例如 data-test）添加到我的组件的输入元素，我在文档中找不到类似的东西.... 我使用ReactJS v18.2和react-select v5.7。我想向我的 data-test 组件的输入元素添加自定义属性（例如 <Select/>），我在文档中找不到类似的内容。对于我自己的自定义功能组件，只需将其添加到 html 标签即可，例如 <input type="text" test={XYZ}/> 对于react-select，它根本不显示在DOM中。我该如何解决它？我遇到了同样的问题，并使用了解决方法来使其工作。为此，我必须创建一个自定义输入组件。 import React from 'react' import Select, { components } from 'react-select' const CustomInput = (props) => { return ( <components.Input {...props} data-test="abc" // put the value you want.. /> ) } const CustomSelect = () => { return ( <Select components={{ Input: CustomInput }} options={[ /* your options here */]} /> ) } export default CustomSelect

javascript html reactjs react-select custom-data-attribute

回答 0 投票 0

react-select 相关问题

最新问题