标签: react-select

我正在使用“react-select”Creatable创建下拉列表并允许用户在列表中创建新项目。

这就是我所拥有的：

<Creatable
  name="form-field-name"
  value={this.props.selectWorker}
  options={this.props.selectWorkers}
  onChange={this.props.handleSelectWorker}
/>

现在，用户可以创建新名称，即使它已经存在，也可以创建重复项，如下所示。

我看到有一个名为isOptionUnique“ react-select site”的选项。

在选项集中搜索任何匹配的选项。此功能可防止创建重复选项。默认情况下，这是标签和值的基本、区分大小写的比较。预期签名：({ option: Object, options: Array, labelKey: string, valueKey: string }): boolean

我还没能使用它。我已经尝试过isOptionUnique=true，isOptionUnique={options:this.props.workers}但出现Creatable.js:173 Uncaught TypeError: isOptionUnique is not a function错误。

我找不到 的示例isOptionUnique，过滤反应选择以防止重复使用的最佳方法是什么Creatable？

有没有一种方法可以使用react-select 获得多行标签或为一个选项提供两个标签？

我通过值和标签传递选择组件选项

value: someValue,
label: "This is my first value - Name: Value 1 \n Foo Bar Date Insert 
Today's Date Here"

我尝试插入换行符，但文本仍保留在选择输入中的一行上。我正在寻找一种解决方案，每个选项都有两行。

我的反应选择有问题。当我在可搜索输入中输入一些文本并单击外部时，我的文本消失了。我尝试过onBlur={() => input.onBlur({value: input.value})}，它工作正常，但我在控制台中出现了丑陋的错误。就像是Uncaught ReferenceError: input is not defined。

onChangeValue = (newValue) => {
  const inputValue = newValue.replace(/\W/g, '');
  this.setState({ inputValue });
  this.props.nameFilter(inputValue);
};

handleCloseMenu = () => {
  this.setState(({
    menuIsOpen: false,
  }))
  input.onBlur(input.value)
};

handleOpenMenu = () => {
  this.setState(({
    menuIsOpen: true,
  }))
  input.onBlur(input.value)
};

render() {
  return (
   <div className="container">
    <AsyncSelect 
      className="search-input"
      onFocus={this.handleOpenMenu}
      onBlur={this.handleCloseMenu}
      menuIsOpen={this.state.menuIsOpen}
      loadOptions={this.loadOptions}
      defaultOptions
      onInputChange={this.onChangeValue}
      placeholder="Search..."
    />
  </div>    
  )};
};

有没有不使用 redux-form 的解决方法？

与这里相同的问题，但我没有使用 redux-form 并且这些解决方案不起作用。

我一直在尝试自定义react-select AsyncSelect 加载消息和无选项消息，但到目前为止没有运气。

这是我当前的代码：

                    <AsyncSelect
                        noOptionsMessage={() => 'nothing found'}
                        LoadingMessage={() => 'searching...'}
                        cacheOptions
                        loadOptions={searchForPointsOfInterest}
                        getOptionLabel={(option) => option.name}
                        getOptionValue={(option) => option}
                        defaultOptions
                        isRtl={true}
                        isClearable={true}
                        placeholder="example"
                        isLoading={isLoading}
                        onChange={onPointOfInterestChange}
                        defaultValue={props.area}
                    />

我们正在我们的一个项目中使用反应选择组件并尝试解决可访问性问题。目前，无法向具有 aria-autocomplete="list" 属性的输入元素提供所需的 aria 属性。

https://www.digitala11y.com/aria-autocomplete-properties/

上面是我们想要实现的目标的参考链接。以下是上述链接中的短篇故事。

If an element has aria-autocomplete set to list or both, authors MUST ensure both of the following conditions are met:

The element has a value specified for aria-controls that refers to the element that contains the collection of suggested values.
Either the element or a containing element with role combobox has a value for aria-haspopup that matches the role of the element that contains the collection of suggested values.

我打开了一个 PR，以添加将 ARIA 属性添加到输入元素的功能。 …

我正在尝试缩小反应选择的选择组件的大小。除了一个例外，一切都运行得很好。

我希望删除其填充的元素具有此类：css-tlfecz-indicatorContainer并且是反应选择的子组件Select组件的子组件，更准确地说，是负责渲染\xc3\x97符号以清除选择的子组件。

我尝试将其放入 Select 的 styles 属性中：

indicatorsContainer: (provided, state) => {\n  return {\n    ...provided,\n    padding: \'0px\',\n    paddingLeft: \'0px\',\n    paddingTop: \'0px\',\n    paddingRight: \'0px\',\n    paddingDown: \'0px\',\n  };\n},\n

但这不起作用。我期望有一个 IndicatorContainer 可样式组件，这样我就不必用自己的组件覆盖组件，但我认为这是唯一的方法。

如果我从 DevTools\' Elements 选项卡手动更改样式，则选择的屏幕截图如下：

没有错误消息。

谢谢。

我已将 React-select 元素与 Formik 连接起来。验证在桌面浏览器中运行良好。但在移动浏览器或移动浏览器模拟器中，我在第一次 React-select 元素值更改时收到验证错误。但我在下一个值更改时没有收到错误。这是 Formik 或 React-select 中的错误吗？有可能解决这个问题吗？

这是codesandbox上的示例： https://codesandbox.io/s/musing-mcnulty-62euu ?file=/index.js

请仅在移动浏览器或移动浏览器模拟器中检查它，因为验证在桌面浏览器中工作正常。

useState不会立即更新状态。

我正在使用react-select，我需要加载multi根据请求结果选择的 ( ) 选项的组件。

因此，我创建了 statedefaultOptions来存储常量的值queues。

事实证明，加载组件时，值 \xe2\x80\x8b\xe2\x80\x8bar 仅在第二次显示。

我console.log在 中做了一个queues，返回与空不同。

我对状态做了同样的事情defaultOptions，返回的是空的。

我创建了一个codesandbox以便更好地查看。

const options = [\n  {\n    label: "Queue 1",\n    value: 1\n  },\n  {\n    label: "Queue 2",\n    value: 2\n  },\n  {\n    label: "Queue 3",\n    value: 3\n  },\n  {\n    label: "Queue 4",\n    value: 4\n  },\n  {\n    label: "Queue 5",\n    value: 5\n  }\n];\n\nconst CustomSelect = (props) …

我正在使用反应选择库为我的下拉可搜索组件创建一个测试。在自定义该组件时，
我无法data-testid向组件添加属性，因为它是在反应选择文档中定义的。Option

该data-testid属性不会显示在Option元素的 DOM 中。

选项组件

import Select, { components } from 'react-select';

const CustomOption = (props: OptionProps<SearchDropdownOption, false>) => (
  <components.Option {...props} data-testid="test-id" />
);

例如，我成功使用了DOM 中显示Input的下拉列表和属性的搜索版本组件：data-testid

输入组件

import Select, { components } from 'react-select';

const CustomInput = (props: InputProps<SearchDropdownOption, false>) => (
  <components.Input {...props} data-testid="test-id" />
);

而不是在Select组件中使用它：

<Select<SearchDropdownOption, false>
  components={{
    Input: CustomInput,
    Option: CustomOption,
  }}
  isSearchable={isSearchable}
/>

我有一个使用反应选择的自定义组件。这使用了Createable Selectand 看起来像：

import CreatableSelect from "react-select/creatable";
import {
  ActionMeta,
  MultiValue,
  MultiValueGenericProps,
  OptionProps,
  StylesConfig,
  components,
} from "react-select";


type UserOption = {
  value: number;
  label: string;
  logo?: string;
};


type CustomUserInputProps = {
  userOptions: UserOption[];
  onChange: (
    newValue: MultiValue<UserOption>,
    actionMeta: ActionMeta<UserOption>
  ) => void;
  onBlur: ChangeEventHandler;
  value: UserOption[];
  name: string;
}


export function CustomUserInput ({
  userOptions,
  onChange,
  onBlur,
  value,
  name,
  disabled,
  isEdited,
}: CustomUserInputProps ) {
   ...
   return (
         <CreatableSelect
          options={userOptions}
          onChange={onChange}
          placeholder={""}
          isMulti={true}
          onBlur={onBlur}
          value={value}
          name={name}
          components={{ …