react-select (AsyncSelewhen typing) 不删除

Question

我有一个使用 AsyncSelect 的下拉列表，当我试图清除它时它并没有清除。因为我现在有设置，所以我必须：在渲染时显示先前选择的值（由状态设置，而状态又从道具中获取其初始值），能够更新该值（onChange），能够键入输入要搜索的字符串。现在，在预先填充一个值后，当我单击下拉菜单进行键入和搜索时，我的输入没有被清除，我也看不到我输入的内容，几乎就像输入不允许编辑一样。

更新：例如，当我点击下拉菜单时，我会看到光标，但如果我点击 "delete"，则该值不会重置。

如有任何帮助，我们将不胜感激。

import React, { Component } from 'react';
import AsyncSelect from 'react-select/async';



class DropDown extends Component {
  constructor(props) {
    super(props);
    this.state = {
      selectedValue: null,
      loaded: false,
    };
    this.onChange = this.onChange.bind(this);
    this.loadOptions = this.loadOptions.bind(this);
  }

  componentDidMount() {
    const { value } = this.props;
    this.setState({ selectedValue: value, componentMounted: true });
  }

  onChange(value) {
    const { updateParent } = this.props;
    this.setState({ selectedValue: value });
    updateParent(value);
  }

// this returns a promise with my data
  loadOptions() {
    const { getDropDownOptions } = this.props;
    return getDropDownOptions();
  }

  render() {
    const { selectedValue, loaded } = this.state;

    return (
      loaded && (

        <AsyncSelect
          defaultOptions
          isClearable
          inputValue={selectedValue}
          onChange={event => this.onChange(event)}
          loadOptions={this.loadOptions}
          {...{ ...this.props }}
        />

      )
    );
  }
}

DropDown.defaultProps = {
  isClearable: true,

};
export default DropDown;

Answer 1

您正在将形状为 { value : '1', lable:'apple' } 的所选选项作为输入值传递给 <AsyncSelect/>，无需将输入值显式传递给组件，因为它将被管理来自 Select 组件内部。只是改变，

<AsyncSelect
   ...
   inputValue={selectedValue}
   ...   
  />

到

<AsyncSelect
   ...
   value={selectedValue}
   ...
  />

react-select (AsyncSelewhen typing) 不删除

react-select (AsyncSelewhen typing) not deleting

react-select