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

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

为了实现您想要的行为，删除 onKeyDown 函数。这将允许您输入标签，而无需将它们填充到菜单中。

添加自定义标签

创建标签的结果

Answer 2

所以我把这个复杂化了。并且由于上面的答案，我能够更好地处理它。我需要能够通过键盘添加标签，将它们添加到下拉列表中，然后能够被删除。 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>

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

React-select: How to add created items to options list

reactjs

react-select

添加自定义标签

创建标签的结果