Как запретить пользователю вводить пробелы в поле формы ввода в ReactJS?

Question

Я создал компонент под названием QueryForm , который будет использоваться для поиска. Я возвращаю в этом компоненте следующее:

return (
    <form
      data-testid="form"
      className={styles.form}
      onSubmit={e => {
        e.preventDefault();
        setQueryText(inputValue);
      }}
    />

Константа inputValue использует хук UseState как:

const [inputValue, setInputValue] = useState("");

Изменение в значение формы передается следующим образом:

const onChange = (event, { newValue }) => {
    setInputValue(newValue);
  };

Я хочу, чтобы когда пользователь вводил текст в форме, он / она не должны иметь возможность использовать в нем пробелы. Есть идеи, как заставить это работать. Я пробовал разные способы, но, похоже, это не работает. Экспорт моего функционального компонента по умолчанию выглядит следующим образом:

export default function QueryForm({
  setQueryText,
  resetSearch
})

Answer 1

Вы можете заменить пробелы на пустую строку при установке значения:

const onChange = (event, { newValue }) => {
  setInputValue(newValue.replace(/\s/g, ''));
};