如何在失去对 async-select 的关注后保持选项状态？

Question

使用 'react-select' 的组件，我在选项状态方面遇到了麻烦。在 'blur' 事件之后，选项设置为默认选项，但是 inputValue 仍然设置。如何避免此类选项重置？

“反应”16.8.6 “反应-select”2.4.2

我根据文档 https://react-select.com/props#async-props 向组件提供所有道具，包括 loadOptions 返回 Promise，它使用选项列表解析，defaultOptions 为真，cacheOptions 为真，inputValue 来自我组件的状态，onInputChange 改变状态的 inputValue 除了 'input-blur' 和 'menu-close'。

onInputChange = (inputValue, { action }) => {
  if (!['input-blur', 'menu-close'].includes(action)) {
    this.setState({ inputValue });
  }
};

loadOptions = input => {
  return getOptions(input)
};

<Async
  cacheOptions,
  defaultOptions,
  onInputChange={onInputChange}
  loadOptions={loadOptions}
  inputValue={inputValue}
>

我希望 'focus' 之后的选项与 'blur' 之前的选项保持一致，但选项设置为默认值。

Answer 1

为 <Async> onChangeInput 的道具提供的文档并不完全正确。

function (
  string,
  {
    action required One of <
      "set-value",
      "input-change",
      "input-blur",
      "menu-close"
    >
  }
) => undefined

并不总是undefined期望从函数返回。

处理更改时 <Async> 获取从 onInputChange 返回的 inputValue。从我所在的州返回 inputValue 为我解决了这个问题。

如何在失去对 async-select 的关注后保持选项状态？

How to keep options state after losing focus on async-select?

javascript

reactjs

react-select