选择菜单上的已创建选项 close/select 使用可创建组件模糊

Question

有什么方法可以指示 react-select 到 select 菜单关闭或 select 模糊的选项，但前提是它是创建的（不是来自默认列表）？

上下文：

我有一个电子邮件地址列表，希望允许用户从列表中 select 或输入新的电子邮件地址，然后点击提交按钮。我用 react-select 的 Creatable 组件做了 select 部分并且它有效。

import CreatableSelect from 'react-select/creatable';

<CreatableSelect
    options={options}
    isMulti={true}
    isSearchable={true}
    name={'emailAddresses'}
    hideSelectedOptions={true}
    isValidNewOption={(inputValue) => validateEmail(inputValue)}
/>

但我的用户发生的情况是他们键入新的电子邮件地址，不明白他们需要单击下拉菜单中新创建的选项并直接点击表单的提交按钮。因此菜单关闭，因为 select 的焦点被盗并且提交的表单没有电子邮件地址 selected.

我正在寻找一种方法，如何在菜单关闭和键入的选项消失之前 select 创建的选项。

Answer 1

您可以跟踪 inputValue 并在触发 onMenuClose 和 onBlur 回调时将 inputValue 添加为新选项。

请记住，如果您单击 select 区域以外的任何地方，onBlur 和 onMenuClose 都会触发。如果您按下 Esc 键，onMenuClose 也可以在没有 onBlur 的情况下单独触发，因此您需要编写额外的逻辑来处理额外的边缘情况。

function MySelect() {
  const [value, setValue] = React.useState([]);
  const [inputValue, setInputValue] = React.useState("");
  const isInputPreviouslyBlurred = React.useRef(false);
  const createOptionFromInputValue = () => {
    if (!inputValue) return;
    setValue((v) => {
      return [...(v ? v : []), { label: inputValue, value: inputValue }];
    });
  };
  const onInputBlur = () => {
    isInputPreviouslyBlurred.current = true;
    createOptionFromInputValue();
  };
  const onMenuClose = () => {
    if (!isInputPreviouslyBlurred.current) {
      createOptionFromInputValue();
    }
    else {} // option's already been created from the input blur event. Skip.
    isInputPreviouslyBlurred.current = false;
  };
  return (
    <CreatableSelect
      isMulti
      value={value}
      onChange={setValue}
      inputValue={inputValue}
      onInputChange={setInputValue}
      options={options}
      onMenuClose={onMenuClose}
      onBlur={onInputBlur}
    />
  );
}

选择菜单上的已创建选项 close/select 使用可创建组件模糊

Selecting created option on menu close/select blur using creatable component

reactjs

react-select

现场演示