你可以只使用trim

export default function App() {

  const [val, setVal] = useState();

  return (

    <div className="App">

      <input

        value={val}

        onChange={(e) => {

          setVal(e.target.value.trim());

        }}

      />

    </div>

  );

}

好的答案，但它們都假設輸入是受控的。對于不受控制的表單，您希望確保在觸發 onChange 事件之前進行驗證。適用于受控和不受控制形式的解決方案是：

const onKeyDown = (event) => {

  if (event.code === 'Space') event.preventDefault()

}

下面包含類型

const onKeyDown = (event: KeyboardEvent): void => {

  if (event.code === 'Space') event.preventDefault()

}

如果除了拒絕空格之外還有其他需求，則該“if”語句的條件可以是正則表達式或重構函數。

您可以在設置值時將空格替換為空字符串：

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

  setInputValue(newValue.replace(/\s/g, ''));

};