Question

使用'react-select'组件，我对选项状态有疑问。在'blur'事件之后，选项设置为默认选项，但是inputValue仍然设置。如何避免此类选项重置？

“反应” 16.8.6 “反应选择” 2.4.2

我根据文档https://react-select.com/props#async-props向组件提供了所有道具，包括loadOptions返回Promise，它以选项列表，defaultOptions为真，cacheOptions解析为选项列表是的，inputValue从组件的状态开始，onInputChange更改除“ input-blur”和“ menu-close”之外的动作上的状态inputValue。

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

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

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

我希望“焦点”之后的选项与“模糊”之前的选项保持相同，但是选项设置为默认值。

Answer 1

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

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

从函数返回的值并不总是undefined。

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

在失去对异步选择的关注之后如何保持选项状态？

1 个答案: