标签: react-select

新的v2 react-select控件非常棒,但默认情况下太大了.是否有(最好)简单的方法将高度降低到与标准选择控件相同(使用Bootstrap v3)？

我的页面上有两个可用的react-select下拉菜单，一个允许用户选择 A 或 B，另一个允许他们从“blue, yellow , red”中选择多个项目。

当他们选择了这些项目时，我想使用它们。现在我只想检查已选择的值，所以我只是将它们打印到屏幕上。对于单选下拉菜单，我成功地使用了 github 中的示例代码。如下：

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

const options = [
  { value: 'a', label: 'a' },
  { value: 'b', label: 'b' },
];

class App extends React.Component {
  state = {
    selectedOption: null,
  }
  handleChange = (selectedOption) => {
    this.setState({ selectedOption });
    document.write(`Option selected:`, selectedOption.value); //this prints the selected option
  }
  render() {
    const { selectedOption } = this.state;

    return (
      <Select
        value={selectedOption}
        onChange={this.handleChange}
        options={options}
        //isMulti …

我正在使用react-select中的CreatableSelect组件。现在，用户可以选择任意数量的项目，但我希望用户选择的项目不超过5个。如何限制可以选择的最大选项数？

<CreatableSelect
  classes={classes}
  styles={selectStyles}
  textFieldProps={{
    label: "Tags"
  }}
  options={suggestions}
  components={components}
  value={this.state.multi}
  onChange={this.handleChange("multi")}
  placeholder=""
  isMulti
/>

我想知道如何使用 react-select 很好地向 Select 添加类型。

到目前为止的组件看起来像这样：

const Select: React.FC<Select> = (
  {defaultValue, onChange, options}: Select) => (
  <ReactSelect
    styles={selectStyles}
    …
  </ReactSelect>

和的定义selectStyles：

interface HoverProps {
  bowShadow: string
  border: string
}

interface ControlComponentCSSProperties extends CSSProperties {
  '&:hover': HoverProps
}

const selectStyles = {
  control: (
    provided: CSSProperties,
    state: Props<{label: string; value: string}> | Props<Record<string, unknown>>
  ): ControlComponentCSSProperties => ({
    ...provided,
    '&:hover': {
      bowShadow: 'none',
      border: 'none',
    },
    border: 'none',
    borderRadius: input.border.radius,
    borderBottomLeftRadius: state.menuIsOpen ? 0 : input.border.radius,
    borderBottomRightRadius: state.menuIsOpen …

我为我的反应项目自定义了一个反应选择下拉组件。当我尝试使用 React.HTMLAttributes<HTMLSelectElement | 扩展界面时 HTMLInputElement>. 它显示“没有与此调用匹配的重载”。我尝试扩展不同的属性来获取默认值，如 id、标签、名称、占位符等。如何获取 props 中的默认属性？有人遇到过类似的问题吗？

示例代码：

import * as React from "react";

import ReactSelect from 'react-select';

export interface SelectProps extends React.HTMLAttributes<HTMLSelectElement | HTMLInputElement> {
    options: Array<any>;
    isMulti: boolean;
    isDisabled: boolean;

};

const Select: React.FC<SelectProps> = (props: SelectProps) => {

    return (<div>
        <label htmlFor={props.id}>{props.label}</label>
        <div>
            <ReactSelect
                {...props}
            />
        </div>
    </div>)
}
export default Select;

使用上面的代码后，我无法获取 props.id 或 props.name 等。

我正在使用 React-Select 的异步选择来实现一个下拉列表，用户将能够在其中搜索大量数据。他们在搜索时会看到员工的姓名，并且可以选择多名员工。

React-select 将使用我拥有的搜索 API 获取数据，并使用此方法在后面插入查询：

const loadOptions = async () => {
        const res = await fetch(`https://example.com/search_user?value=${query}`);
        const data = await res.json();
        const results = data.Result;

        if (results === 'No result found.') {
            return [];
        }

        return results;
    };

我想要获取的是员工 ID 及其全名，然后在用户提交表单后将这两个信息发布到 API。

所有这些工作都很完美，但现在我想实现一个编辑功能，用户可以编辑Group Members已保存到数据库中并创建的内容。

因此，很自然地，我需要使用react-select初始选项加载 的异步下拉列表，但是当我使用搜索 API 时，我不知道如何加载初始选项，该搜索 API 在我输入某些内容后只会获得特定的结果列表。

当用户单击编辑时，我想要这样的东西，它将显示数据库中保存的员工姓名（可以选择单个或多个选项）：

这里是用于参考的codesandbox，但我只使用了一个假的API链接：

编辑：

对于@Pitter的参考：

最新更新： 我尝试使用valuePitter 提到的选项，但不知何故，即使我尝试取消选择或清除选项以及尝试搜索并选择新选项，输入的选项也没有改变。

最终更新 终于我成功了！我所需要的只是将value道具/组件设置为一个状态，并为道具/组件提供一个handleChange方法onChange来更改值的状态。它实际上与通常的react-select 的工作方式相同Select。

下面是我使用过的代码：

// Creating …

所以，我需要将 defaultValue 传递给启用多选的 react-select 组件。我已经尝试了所有我能想到的：字符串数组、对象数组、字符串等......似乎没有任何效果。

我也在使用 getOptionLabel 和 getOptionValue，它们可能是造成所有这些混乱的原因吗？

我正在为Async Select from苦苦挣扎react-select。我设法显示了一些 defaultOptions 并使用 promises 和loadOptionsprop对其选项进行异步获取。

我需要的是在单击时显示选项下拉列表时更新选项（解决承诺）。有没有办法执行相同的承诺onClick（即使在onChange）？

我正在使用react-select团队提供的以下代码笔https://codesandbox.io/s/7w4w9yyrmx?module=/example.js

感谢您的帮助！

我正在尝试在 react select 的输入元素前面添加一个图标。我能够在占位符中获取图标，但占位符的问题是当我从下拉列表中选择一些数据时，占位符图标会被删除。我需要一些帮助来获取 Select 语句前面的图标。

这是我到目前为止所取得的成就的代码

import React, { Component } from 'react'
import Select, { components } from 'react-select'

export default class InfluencersForm extends Component {

    constructor(){
        super();
        this.handleInfluencerName = this.handleInfluencerName.bind(this);
    }
    handleInfluencerName(event){
        console.log(event)
    }
    render() {
        const influencers = [
            { value: 'abc', label: 'abc' },
            { value: 'def', label: 'def' }
        ]

        const DropdownIndicator = (props) => {
            return components.DropdownIndicator && (
                <components.DropdownIndicator {...props}>
                    <i className="fa fa-search" aria-hidden="true" style={{ position: 'initial' }}></i>
                </components.DropdownIndicator>
            );
        };
        return …

当我尝试将 React Select 引用到变量中时，我得到 StateManager 而不是 Select 并且 typesctipt 不知道 this.selectRef.current.select 但这个选择是变量。是更好的解决方案，然后将 this.selectRef.current.select 重新键入为 Select<T>？

我想通过单击其他元素来展开选择。

import Select from "react-select";

interface OwnProps<T> {
  alignRight?: boolean;
  components?: ComponentsType<T>;
  defaultValue?: Value<T>;
  disabled?: boolean;
  isSearchable?: boolean;
  onChange?: DropdownChangeHandler<T>;
  onBlur?: React.FocusEventHandler;
  options: T[];
  placeholder?: string;
  value: Value<T>;
  menuPortalTarget?: HTMLElement | null;
  dataTest?: string;
}

export default class Dropdown<T = Option> extends React.PureComponent<OwnProps<T>> {
  static defaultProps = {
    isSearchable: false,
  };

  selectRef: React.RefObject<Select<T>>

  constructor(props: OwnProps<T>){
    super(props);
    this.selectRef = React.createRef();
  }

  expand = () => { …