React-select：如何将创建的项目添加到选项列表

Question

所以我使用react-select 库的Creatable 组件。我希望能够将创建的选项添加到 keyDown 上的选项数组中。 How it looks right now

我的状态：

  const [value, setValue] = useState([]);
  const [inputValue, setInputValue] = useState('');
  const [selectedValues, setselectedValues] = useState([]);

  const [current, setCurrent] = useState([]);

  const [selection, setSelection] = useState(statusOptions);

我的功能

 const handleInputChange = (value) => {
    setInputValue(value);
  };
  const handleOnChange = (haha) => {
    setCurrent(haha);
  };

  const handleKeyDown = () => {
    setTimeout(() => {
      setNewValues();
    }, [2700]);
  };

  const setNewValues = (event) => {
    const newOption = { label: inputValue, inputValue };
    inputValue !== '' && setSelection([...selection, newOption]);

    setCurrent(current);
    let difference = current.filter((x) => !value.includes(x));

    setInputValue('');

    setselectedValues(difference);
  };

组件的外观

<CreatableSelect
        options={selection}
        isMulti
        onChange={handleOnChange}
        onInputChange={handleInputChange}
        inputValue={inputValue}
        value={selectedValues.selected}
        inputValue={inputValue}
        onKeyDown={handleKeyDown}
      />

问题：现在，当用户键入时，inputValue 被添加到下拉列表中，我不知道为什么。我可以在 keyDown 上添加和删除标签。但是当用户输入速度慢或写得不够快时，下拉列表会以两个创建的选项结束。

Answer 1

所以我过于复杂了。由于上面的答案，我能够更好地接近它。我需要能够通过键盘添加标签，将它们添加到下拉列表中，然后能够被删除。 Here's the full answer

  const [inputValue, setInputValue] = useState('');
  const [selectedValues, setselectedValues] = useState({ selected: [] });

  const [selection, setSelection] = useState(statusOptions);

  const handleInputChange = (value) => {
    setInputValue(value);
  };

  const handleOnChange = () => {
    const newOption = { label: inputValue, inputValue };

    inputValue !== '' && setSelection([...selection, newOption]);

    setInputValue('');

    setselectedValues(selection);
  };

  return (
    <div>
      <CreatableSelect
        options={selection}
        isMulti
        onChange={handleOnChange}
        onInputChange={handleInputChange}
        inputValue={inputValue}
        value={selectedValues.selected}
        inputValue={inputValue}
        controlShouldRenderValue={true}
      />
    </div>

Answer 2

该选项被添加到列表中，因为 setNewValues 在 2700 毫秒计时器到期后被调用，这将新选项项添加到菜单中。

为了实现您想要的行为，请删除onKeyDown 函数。这将允许您在不填充菜单的情况下输入标签。

添加自定义标签

标签创建结果