标签: react-select

我使用该组件在 Javascript React 中创建了一个自定义下拉菜单react-select。通过使用optionComponentprop，我能够使用复选框渲染每个选项（见图）。我现在的问题是，一旦您单击任何复选框，选择选项就会关闭，这不是很好的用户体验。

图像：

因此，我的问题是，是否有任何方法可以阻止下拉菜单关闭，直到用户单击选择右侧的箭头，以便可以在关闭选项之前勾选和取消勾选任意数量的复选框。

我在一个网站上使用react-select 进行一系列选择下拉菜单，该网站部分是Ruby on Rails，部分是React.js。我希望能够在 Capybara 中编写一个功能测试，它将：

1. 单击/聚焦选择
2. （可选）输入过滤器值
3. 从下拉列表中选择一个结果

最终结果是确认提交表单时我们选择的值已被保存。

当我单击时，选择小部件在浏览器中运行良好，但我看不到如何触发它打开 jQuery 或其他 JS 单击/鼠标按下/打字事件。这可能吗？

如何让 react-select 尊重 flex 布局？以下没有任何工作。

 const Container = styled('div')`
   width: 100%;
   height: 100%;
   display: flex;
   flex-flow: row wrap;
   justify-content: space-around;
   align-items: baseline;
 `;

const selectStyles = {
  input: base => ({
    minWidth: 200,
    flex: 1,

<Container>
<Select
  style={{ flex: 1 }}
  styles={selectStyles}

我试图弄清楚如何利用 react-select 中的自定义组件来呈现包含带有潜台词的项目的下拉列表。

我在https://react-select.com/components上查看了每个组件，但不确定哪一个最适合我的需求。

从查看组件列表来看，我相信该option组件用于类似的东西并且可能会起作用，但我不确定。有人可以验证我的想法吗？

我是 Material UI 和 React 的新手，在其他问题上没有发现 . 我正在尝试使用 React-Select 组件开发对话框材质 UI。问题是 Dialog 上的 react-select 菜单被 Dialog Action 组件隐藏了。 我的对话框组件

react-select 组件下方的这一行是 react-select 渲染的 Paper 组件。

我尝试了一些 CSS 代码，例如 zIndex 和位置，但仍然没有找到显示菜单的方法，或者更好的是，让菜单（Paper 组件）覆盖 Dialog Action 组件。

我的对话框、对话框内容和对话框操作使用以下 className：

 dialog: {
        zIndex:0,
        display:'flex',
        flex:1,
        flexGrow:1,
        flexDirection:'column',
        flexWrap: 'wrap',
        height: 'auto',
    },

对于react-select组件渲染的Menu（Paper Component），我尝试了以下方法：

dialogPaper: {
        zIndex: 0,
        maxHeight:300,
        position: 'absolute',
        overflowY:'auto',
        marginTop: theme.spacing(1),
        left:0, right: 0
    },
    paper: {
        zIndex: 1000,
        maxHeight:300,
        position: 'absolute',
        overflow:'visible',
        overflowY:'auto',
        marginTop: theme.spacing(1),
        left:0, right: 0
    },

我的代码与 …

我想更改react-select选项框宽度。示例在这里=>

如果我的内容大于选项，则显示水平滚动但我不想要水平滚动。如何更改选项框宽度的大小？

另一件事是如何将所选值显示为 CscID 一个偶数选项框显示 CscID + CscDesc？现在，当我选择该选项时，其 CscID + CscDesc 显示在所选框中。

这是我的选择 =>

const formatOptionLabel = ({ CscID, CscDesc }) => (

            <div style={{ display: "flex"}}>
                <div>{CscID}</div>                
                <div>{CscDesc}</div>
            </div>
            );

const customStyles = {
                control: styles => ({ ...styles, }),
                option: (styles) => {

                  return {
                    ...styles,

                   width: '10000px',  //For testing                 

                  };
                },

              };

<Select 
        styles={customStyles} 

            formatOptionLabel={formatOptionLabel}
            getOptionValue={option =>
                `${option.CscID}`
              }
            options={datasource}            

        />

我正在尝试为 DropdownIndicator 创建自定义组件并在使用 Typescript 的 react-select 上使用，但是我在组件类型方面遇到了一些问题，因为我是 typescript 的新手。

如何在我的组件上使用在 @types/react-select 上定义的类型？

我已经安装了 @types/react-select 并且已经有一个DropdownIndicator 类型，但我找不到引用它的方法。

这是我的index.tsx：

import React from 'react';
import Select from 'react-select';

import DropdownIndicator from './dropdown-indicator';

const components = {
  DropdownIndicator,
};

const SelectFilter: React.FC = () => {
  return <Select components={components} />;
};

export default React.memo(SelectFilter);

这是我的dropdown-indicator.tsx：

import React from 'react';

import DropdownIcon from './dropdown-icon';

const DropdownIndicator: React.FC = props => {
  const {
    selectProps: { isMenuOpen },
  } = …

我正在使用react-select图书馆https://react-select.com/home#getting-started。试图将选择减少到维度width: 90px; height: 23px。但是，当您单击它时，选择增加。如何设置上述参数，使 select 有一个 cay 时间width: 90px; height: 23px？

演示在这里：https : //stackblitz.com/edit/react-sk7g4x

import Select from 'react-select'

const options = [
  { value: 'chocolate', label: 'Chocolate' },
  { value: 'strawberry', label: 'Strawberry' },
  { value: 'vanilla', label: 'Vanilla' }
]

class App extends Component {
  constructor() {
    super();
    this.state = {
      name: 'React'
    };
  }

  render() {
    return (
      <Select options={options} />
    );
  }
}

CSS

.css-2b097c-container {
  width: 90px; …

我正在尝试创建一个使用 react-select 和 typescript 的示例组件。

为此，我创建了一个功能组件并添加了react-select docs 中的默认示例：

const options = [
    {value: 'chocolate', label: 'Chocolate'},
    {value: 'strawberry', label: 'Strawberry'},
    {value: 'vanilla', label: 'Vanilla'},
];

const MyComponent = () => {

    const [selectedOption, setSelectedOption] = useState('chocolate');

    const handleChange = (option: string) => {
        setSelectedOption(option);
    };

    return (
        <Select
            value={selectedOption}
            onChange={(option) => handleChange(option)}
            options={options}
        />
    );

};

但是，这给了我一个错误：

 Overload 1 of 2, '(props: Readonly<Pick<Props<OptionTypeBase>, string | number> & Props<OptionTypeBase> & Props<OptionTypeBase>>): StateManager<...>', gave the following error.
    Type 'string' is …

我已经尝试了我能想到的所有方法，但是display: none当为组件选择一个值时，我无法阻止 react-select 中的占位符消失（我假设更改为因为它不再在 HTML 中）。

我已经阅读了两篇有类似问题的帖子：https : //github.com/JedWatson/react-select/issues/2152 https://github.com/JedWatson/react-select/issues/2143

但没有发现任何成功

我在占位符元素上的样式是：

valueContainer: base => ({
        overflow: 'visible'
      }),
placeholder: (provided, state) => ({
        ...provided,
        position: "absolute",
        marginTop: '-30px',
        display: 
      state.isFocused || state.isSelected || state.selectProps.inputValue || state.value
      ? 'block'
      : 'block',
      }),

这是一个堆栈闪电战。最终目标是在中心开始占位符并将其向上移动到焦点和选择的位置。问题是，一旦选择了某些内容，占位符就会消失。 https://stackblitz.com/edit/react-egf4va