防止在 React 中按 Enter 键提交表单

Prevent form submission on Enter press in React

要防止在 React 中按下 Enter 键时提交表单，请使用
对象preventDefault()上的方法event，例如event.preventDefault(). 该preventDefault方法防止浏览器在提交表单时刷新页面。

应用程序.js


import {useState} from 'react';

const App = () => {
  const [firstName, setFirstName] = useState('');
  const [lastName, setLastName] = useState('');

  const handleSubmit = event => {
    console.log('handleSubmit ran');
    event.preventDefault(); // 👈️ prevent page refresh

    // 👇️ access input values here
    console.log('firstName 👉️', firstName);
    console.log('lastName 👉️', lastName);

    // 👇️ clear all input values in the form
    setFirstName('');
    setLastName('');
  };

  return (
    <div>
      <form onSubmit={handleSubmit}>
        <input
          id="first_name"
          name="first_name"
          type="text"
          onChange={event => setFirstName(event.target.value)}
          value={firstName}
        />
        <input
          id="last_name"
          name="last_name"
          type="text"
          value={lastName}
          onChange={event => setLastName(event.target.value)}
        />

        <button type="submit">Submit form</button>
      </form>
    </div>
  );
};

export default App;

我们使用
preventDefault
方法来防止浏览器在提交表单时刷新页面。

应用程序.js


const handleSubmit = event => {
  console.log('handleSubmit ran');
  event.preventDefault(); // 👈️ prevent page refresh

  // 👇️ access input values here
  console.log('firstName 👉️', firstName);
  console.log('lastName 👉️', lastName);

  // 👇️ clear all input values in the form
  setFirstName('');
  setLastName('');
};

当在Enter具有提交处理程序的表单上按下键时，默认的浏览器行为是刷新页面。

如果你根本不想在Enter按下键时提交表单，你应该onSubmit从表单中删除 prop，并onClick为按钮添加一个处理程序。

应用程序.js


import {useState} from 'react';

const App = () => {
  const [firstName, setFirstName] = useState('');
  const [lastName, setLastName] = useState('');

  const handleClick = event => {
    console.log('handleClick ran');
    event.preventDefault(); // 👈️ prevent page refresh

    // 👇️ access input values here
    console.log('firstName 👉️', firstName);
    console.log('lastName 👉️', lastName);

    // 👇️ clear all input values in the form
    setFirstName('');
    setLastName('');
  };

  return (
    <div>
      <form>
        <input
          id="first_name"
          name="first_name"
          type="text"
          onChange={event => setFirstName(event.target.value)}
          value={firstName}
        />
        <input
          id="last_name"
          name="last_name"
          type="text"
          value={lastName}
          onChange={event => setLastName(event.target.value)}
        />

        <button type="button" onClick={handleClick}>
          Submit form
        </button>
      </form>
    </div>
  );
};

export default App;

上面示例中的表单只会在单击按钮时提交。

该button元素有一个typeofbutton而不是submit，因此按下该Enter键将不会提交表单。

–