react-select - AsyncSelect：如何设置初始值？

Question

我正在使用 AsyncSelect 并且需要根据外部逻辑更改组件的值。例如，我有这个简单的组件：

import { colourOptions } from '../data';

const filterColors = (inputValue: string) => {
  return colourOptions.filter(i =>
    i.label.toLowerCase().includes(inputValue.toLowerCase())
  );
};

const promiseOptions = inputValue =>
  new Promise(resolve => {
    setTimeout(() => {
      resolve(filterColors(inputValue));
    }, 1000);
});

export default class WithPromises extends Component {
  render() {
    return (
      <AsyncSelect cacheOptions defaultOptions loadOptions={promiseOptions} />
   );
  }
}

有没有办法设置它的初始值？我想过使用道具，但我不知道如何执行 onChange 事件，因为这会加载选项数组并设置标签和值。

Answer 1

尝试添加这样的值：

<AsyncSelect
  cacheOptions
  defaultOptions
  value={{ label: 'yellow', value: 2 }}
  loadOptions={promiseOptions} />

它对我有用。

Answer 2

当从菜单选项更改值并且所选项目未更改或基于外部逻辑发生更改时，只需使用状态value={yourState}设置 AsyncSelect 的初始值和更新值。选定的包含对象，例如value={value:'', label:''}

const formFields = {
        name: '',
        foo:'',
        bar:''
}
const [inputs, setInputs] = useState(formFields);

输入是我用来设置字段值的状态

value={inputs.name ? { label: inputs.name } : { label: 'Search customer...' }}

我只使用了标签：“搜索客户...”以使其看起来像占位符。

<AsyncSelect
    defaultOptions
    value={inputs.name ? { label: inputs.name } : { label: 'Search customer...' }}
    cacheOptions
    onChange={(e) => handleCustomerSelect(e)}
    loadOptions={customerPromiseOptions}
/>

这是我从下拉菜单中选择项目时调用的 onChange

function handleCustomerSelect(selectedOption) {
    const { value } = selectedOption;
    setInputs({ ...inputs, name:value });
}

您可以像这样从选项中设置初始值