如何防止用户在 ReactJS 的输入表单字段中输入空格？

Question

我创建了一个名为 QueryForm 的组件，用于搜索功能。我在那个组件中返回这个：

Answer 1

您可以在设置值时将空格替换为空字符串：

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

Answer 2

你可以直接使用trim

export default function App() {
  const [val, setVal] = useState();

  return (
    <div className="App">
      <input
        value={val}
        onChange={(e) => {
          setVal(e.target.value.trim());
        }}
      />
    </div>
  );
}

Codesandbox

如何防止用户在 ReactJS 的输入表单字段中输入空格？

How to prevent user from entering spaces in an input form field in ReactJS?

javascript

jsx

dom-events

reactjs