如何使反应选择不允许选项中的空间？

Question

我们正在考虑用 react-select 3.1 替换旧的标记系统。 由于历史原因，我们的标签中不允许有空格（更改它很复杂）。

然而。 react-select 似乎认为标签中的空格完全没问题。 我想我想做的是让空间成为一个本质上说“嘿，我已经完成了这个标签”的东西，就像 enter 和 tab 当前所做的那样——这与我们现有的行为相匹配，如果可能的话，我想保留它。

有没有办法配置 react-select 以使用此行为？

谢谢！

Answer 1

您将需要管理react-select的 state ，使其成为受控组件，但这是实现此目的的方法：

import Select from "react-select/creatable";
import { useState } from "react";

export default function App() {
  const [value, setValue] = useState(null);
  const [inputValue, setInputValue] = useState("");

  return (
    <div className="App">
      <Select
        inputValue={inputValue}
        onInputChange={(v) => setInputValue(v)}
        onChange={(v) => setValue(v)}
        onKeyDown={(e) => {
          if (e.key === " ") {
            e.preventDefault();
            const newValue = {
              label: inputValue,
              value: inputValue
            };
            setValue((v) => {
              return [...(v ?? []), newValue];
            });
            setInputValue("");
          }
        }}
        value={value}
        isMulti
        options={[
          {
            label: "aaa",
            value: "aaa"
          },
          {
            label: "bbb",
            value: "bbb"
          }
        ]}
      />
    </div>
  );
}