如何使选项中的 react-select 不允许 space？

Question

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

但是！ react-select 似乎认为 spaces 在标签中完全没问题。我认为我想做的是让 space 成为一个本质上说“嘿，我用完了这个标签”的东西，就像 enter 和 tab 目前所做的一样——这符合我们的现有行为，如果可能的话，我想保留它。

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

谢谢！

Answer 1

您将需要管理 react-select 的状态，使其成为受控组件，但您可以通过以下方式实现：

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>
  );
}

如何使选项中的 react-select 不允许 space？

How to make react-select disallow space in options?

javascript

web-component

reactjs