ReactJS表单提交后组件自动刷新（非重载）及e.preventDefault()用法

一、不刷新页面展示新增内容的实现 #

核心逻辑是用React的状态管理维护列表数据，提交表单后直接更新状态，React会自动重新渲染页面展示新内容，完全不需要刷新页面或URL。

具体操作步骤：

• 用useState钩子定义存储列表数据的状态
• 表单提交时，获取用户输入的新内容，将其追加到列表状态中
• 组件渲染时，遍历列表状态渲染所有内容

示例代码：

import { useState } from 'react';
import { Formik, Form, Field } from 'formik';

function ItemList() {
  // 存储已添加内容的状态
  const [items, setItems] = useState([]);

  return (
    <div>
      <Formik
        initialValues={{ content: '' }}
        onSubmit={(values, { resetForm, setSubmitting }) => {
          // 模拟后端接口请求（实际开发中替换为真实API调用）
          setTimeout(() => {
            // 更新列表，添加新内容
            setItems(prev => [...prev, values.content]);
            // 清空表单输入
            resetForm();
            setSubmitting(false);
          }, 600);
        }}
      >
        {({ isSubmitting }) => (
          <Form>
            <Field 
              type="text" 
              name="content" 
              placeholder="输入要添加的内容" 
              required 
            />
            <button type="submit" disabled={isSubmitting}>
              {isSubmitting ? '添加中...' : 'Add'}
            </button>
          </Form>
        )}
      </Formik>

      <div className="content-list">
        <h4>已添加内容：</h4>
        {items.length === 0 ? (
          <p>暂无内容</p>
        ) : (
          <ul>
            {items.map((item, idx) => (
              <li key={idx}>{item}</li>
            ))}
          </ul>
        )}
      </div>
    </div>
  );
}

export default ItemList;

二、Formik中使用e.preventDefault() #

其实Formik的onSubmit函数已经默认帮你调用了e.preventDefault()，阻止了表单默认的页面刷新提交行为。但如果需要手动控制，有两种实现方式：

方式1：直接在表单的onSubmit事件中处理 #

如果不用Formik封装的提交逻辑，直接给表单绑定自定义提交函数，可以直接接收事件参数并调用阻止方法：

<Form onSubmit={(e) => {
  e.preventDefault(); // 手动阻止默认提交行为
  // 这里写你的自定义提交逻辑，比如获取表单数据、更新状态
}}>
  <Field type="text" name="content" />
  <button type="submit">Add</button>
</Form>

方式2：结合Formik的handleSubmit使用 #

如果要保留Formik的表单验证、状态管理能力，同时手动控制默认行为，可以在表单的onSubmit中传递事件：

<Formik
  initialValues={{ content: '' }}
  onSubmit={(values, actions) => {
    // 这里写提交逻辑，比如更新状态、调用API
    setItems(prev => [...prev, values.content]);
    actions.resetForm();
  }}
>
  {({ handleSubmit }) => (
    <Form onSubmit={(e) => {
      e.preventDefault(); // 手动阻止默认行为
      handleSubmit(e); // 调用Formik的提交逻辑
    }}>
      <Field type="text" name="content" />
      <button type="submit">Add</button>
    </Form>
  )}
</Formik>

多数场景下，直接使用Formik自带的onSubmit即可，它已经处理了默认提交行为，无需额外调用e.preventDefault()。

内容的提问来源于stack exchange，提问作者Pooja