防止在 React.js 中提交表单时刷新页面

在事件对象上使用 preventDefault() 方法来防止在 React 中提交表单时刷新页面,例如 event.preventDefault()。 preventDefault() 方法阻止浏览器发出默认操作,在表单提交的情况下是刷新页面。

import {useState} from 'react';

const App = () => {
  const [first, setFirst] = useState('');

  const handleSubmit = event => {
    // ?️ prevent page refresh
    event.preventDefault();

    console.log('form submitted ✅');
  };

  return (
    <div>
      <form onSubmit={handleSubmit}>
        <input
          type="text"
          id="first"
          name="first"
          value={first}
          onChange={event => setFirst(event.target.value)}
        />
        <button type="submit">Submit</button>
      </form>
    </div>
  );
};

export default App;

我们有一个 button 元素,其 type 属性设置为在表单中提交。

默认情况下,浏览器会在触发表单提交事件时刷新页面。

我们通常希望在 React.js 应用程序中避免这种情况,因为它会导致我们丢失状态。

为了防止默认的浏览器行为,我们必须在事件对象上使用 preventDefault() 方法。

防止在 React.js 中提交表单时刷新页面

这是在输入字段上设置 required 属性的示例。

import {useState} from 'react';

const App = () => {
  const [first, setFirst] = useState('');

  const handleSubmit = event => {
    event.preventDefault();

    console.log('form submitted ✅');
  };

  return (
    <div>
      <form onSubmit={handleSubmit}>
        <input
          type="text"
          id="first"
          name="first"
          value={first}
          onChange={event => setFirst(event.target.value)}
          required
        />
        <button type="submit">Submit</button>
      </form>
    </div>
  );
};

export default App;

如果我们需要在提交 for 后清除输入值,请将状态变量设置为空字符串或它们各自的初始值。

import {useState} from 'react';

const App = () => {
  const [first, setFirst] = useState('');

  const handleSubmit = event => {
    event.preventDefault();

    console.log('form submitted ✅');

    // ?️ clear input field values
    setFirst('');
  };

  return (
    <div>
      <form onSubmit={handleSubmit}>
        <input
          type="text"
          id="first"
          name="first"
          value={first}
          onChange={event => setFirst(event.target.value)}
        />
        <button type="submit">Submit</button>
      </form>
    </div>
  );
};

export default App;