如何防止 React 中的表单提交

作者

防止在 React 中提交表单

How to Prevent form submission in React

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

应用程序.js
import {useState} from 'react';

const App = () => {
  const [message, setMessage] = useState('');

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

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

  return (
    <div>
      <form onSubmit={handleSubmit}>
        <input
          type="text"
          id="message"
          name="message"
          value={message}
          onChange={event => setMessage(event.target.value)}
        />

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

export default App;

我们有一个按钮元素，其type属性设置为submit表单。

表单元素有一个onSubmit处理程序，所以每次单击按钮或Enter按下键时，都会调用该函数。 handleSubmit

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

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

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

应用程序.js
const handleSubmit = event => {
  // 👇️ prevent page refresh
  event.preventDefault();

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

请注意，即使我们使用了该preventDefault()方法，本机浏览器验证功能仍会按预期运行。

–

发表评论