标签: react-select

我想MultiValueRemove在容器聚焦时对其进行样式设置（内部带有 x 以删除所选值的容器）。backgroundColor我不想更改为红色。

当背景既没有聚焦也没有选择时，我可以设置背景样式，但“onHover”红色背景不受影响。isSelected当我将鼠标悬停在红色背景上时，使用 state 设置背景样式isFocused不会影响红色背景。

multiValueRemove: (provided, state) => ({
  ...provided,
  color: '#ffffff',
  backgroundColor: '#6FC5C4',
  borderRadius: 0,
}),

我正在使用 React 和 React-Select 并尝试从 api 获取选项。一切都对我有用，但我想展示将文本加载到react-select中，同时数据来自api。

这是我的反应选择组件：

<Select
    onChange={this.getSelectedOption}
    onFocus={this.getData}
    options={options}
    value={selectedOption}
    styles={customStyles}
    placeholder="Select...."
/>

在 onFocus 中，我通过 redux 操作进行 api 调用，并使用来自 redux reducer 的响应设置状态。

  getAvailableDisplays() {
    this.props.getData(); /// redux action dispatch
    if (this.props.data.items) {
   this.setState({ this.state.options: this.props.data.items }); }
  }

通过这种方式，一切正常，但在请求完成时，没有文本，没有选项。

我在这里看到了一些https://react-select.com/async但我不明白在哪里进行 api 调用。

或者我如何在 api 调用完成且状态填充时在 select 中编写加载

每当多选下拉列表中的文本发生变化时，我都需要获取该字符。

但 onKeyUp 没有触发。请找到以下代码以供参考...

const options = [
    { label: "option 1", value: 1 },
    { label: "option 2", value: 2 },
    { label: "option 3", value: 3 },
    { label: "option 4", value: 4 }
  ];
  const onKeyUp= e => {

      alert(e.target.getAttribute("value"));

  };
  const onKeyDown = e => {

      //alert(e.target.getAttribute("value"));

  };
  const selectedOption =value=>{
    alert(value);
  }
  return (
    <div className="App">
      <Select options={options} onKeyUp={onKeyUp}  onKeyDown={onKeyDown} onChange={selectedOption} />
    </div>
  );

是否有内置选项或简单技巧可以在react-select用户选择最后一个可用项目后自动关闭输入？

我使用该选项，closeMenuOnSelect={false}以便我可以继续选择选项（它们之间没有关闭菜单），但是一旦我选择了所有选项，就不需要让它显示“无项目”消息，我希望它自动关闭。

我可以实现这样的行为，但它是多余的样板，所以我正在寻找内置解决方案，但在https://github.com/JedWatson/react-select#props上没有找到任何解决方案

我为此创建了一个功能请求https://github.com/JedWatson/react-select/issues/3936

我正在使用反应选择最新来创建异步选择组件。一旦我选择了某个值，我就尝试更改选择的背景颜色和边框颜色。我浏览了文档并尝试使用state.isSelected有条件地更改背景颜色。但没有帮助。

当选择如下值时，我想更改背景颜色和边框颜色。但似乎什么也没有发生。如有帮助，将不胜感激

React select 不允许对所选选项进行文本选择。我希望用户能够选择所选选项的文本。每当用户尝试选择所选选项的文本时，反应选择的菜单就会打开（弹出）。

代码沙箱链接： https://codesandbox.io/s/bzdhr?module =/example.js

任何帮助表示感谢，提前致谢。

我使用的是反应选择库中的选择元素，在我的项目中我使用的是样式组件。我想问我是否可以在 styles.ts 文件中对其进行样式设置。如果不可能，你们能给我一些如何做造型的建议吗？

React 内部：FC

import Select from 'react-select'

...

const options = [
    { value: 'Income', label: 'Income' },
    { value: 'Expense', label: 'Expense' },
  ]

...

       <Form>
        <InputElement />
        <Select options={options} />
      </Form>

我试图覆盖react select options div的css，所以在最新的react-select v2中，我们可以将它作为样式传递

 <Select
    styles={{
      option: (provided) => ({
        ...provided,
        backgroundColor: '#fff',
        border: null, // tried border: 'none'
        boxShadow: null, // tried border: 'none'
        outline: 0
      }),
    }}
  />;

我正在尝试删除边框，尝试使用上面的代码片段，但边框和阴影保持不变

另外，当单击选择时，我需要在单击时覆盖蓝色背景

我怎样才能做到这一点

有没有办法禁用下拉列表？我没有找到任何可以帮助我的道具。

特别是，当用户选择超过 5 个元素时，我想禁用下拉列表。

我创建了这个codesandbox。它实际上不起作用，因为它没有链接到状态：

const limit = 3;
const defaults = [colourOptions[2], colourOptions[3]];

export default () => (
  <Select
    defaultValue={defaults}
    isMulti
    name="colors"
    options={colourOptions}
    className="basic-multi-select"
    classNamePrefix="select"
    isSearchable={defaults.length < limit}
    // disableDropdown={defaults.length > limit} // <-- something like this
  />
)

选择 3.1.1 并尝试添加一个基本的 isMulti 检查列表，我不希望它在每次选择后关闭，所以我添加了

closeMenuOnSelect={假}

但它并不是每次都在 localhost:3000 上工作。（仅当我处于隐身模式时它才起作用）。它不适用于常规的谷歌和火狐浏览器。所以我尝试部署，但在手机上也不起作用。希望获得帮助或使用 isOpen 函数进行智能绕过。谢谢。

<Select
    closeMenuOnSelect={false}
    components={animatedComponents}
    isMulti
    options={colourOptions}
    hideSelectedOptions={true}
    backspaceRemovesValue={true}
/>