如何防止在 react-select 中接受多个 space？

Question

我正在努力避免用户在 react-select 输入中继续点击 space。功能应该是这样的，如果用户键入一个字符或单词，那么 react-select 应该只接受单个 space，但在当前情况下，在键入单个字符或单词后，用户可以键入或按 space 多个或不断地。在 react-select 中有什么方法可以阻止用户在 space 中添加或按下多个

任何帮助将不胜感激。

这是屏幕短片，其中 react-select 在键入单词后接受多个 space 秒。

注意：我知道如何防止space通过使用这个

       <Select
        className="select-width select-color"
        menuPortalTarget={document.body}
        styles={customStyles}
        value={selectedVal}
        onChange={(e) => { this.onChange(e, this.props) }}
        options={technologyArray && technologyArray.map(t => ({ value: t, label: t }))}
        openMenuOnClick={true}
        placeholder="Please select tech"
        components={{ IndicatorSeparator: () => null }}
        onKeyDown={e => {
            if (e.keyCode === 32) e.preventDefault();
          }}
        />
onKeyDown={e => {
         if (e.keyCode === 32) e.preventDefault();
    }}

但我想防止多次 space 或继续 space。

Answer 1

您可以使用 onInputChange 属性来清除它。

  handleInputChange = (newValue: string) => {
    const inputValue = newValue.replace(/\W/g, '');
    this.setState({ inputValue });
    return inputValue;
  };

   <Select
    onInputChange={this.handleInputChange}
   />

Answer 2

您可以使用 onInputChange 属性来控制对用户可见的 inputValue。

 onInputValueChange = inputValue => {
    this.setState({ inputValue: this.allowOnlyOneSpace(inputValue) });
  };

  allowOnlyOneSpace = str => {
    return str.endsWith(" ") ? str.trim() + " " : str.trim();
  };

上面的代码将允许一个 space，因为该选项可能包含一些带有 space 的值，例如“A 和 B”

代码沙箱：https://codesandbox.io/s/react-codesandboxer-example-qwbo1?file=/example.js

如何防止在 react-select 中接受多个 space？

How to prevent accepting multiple space in react-select?

reactjs

react-select