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事件，因为这会加载options数组并设置标签和值。

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);

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

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

我只使用了标签：'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 });
}

您也可以从选项中设置初始值，例如 this

AsyncSelect：如何设置初始值？

2 个答案: