如何使用React Hook实现页面加载完成后自动提交表单的功能

功能实现代码 #

你需要的两个功能完整实现代码如下，已修复原代码中存在的嵌套表单、状态未声明、自动提交逻辑错误问题：

import firebase from "@config/firebase.config";
import "firebase/firestore";

import { useState, useEffect, useRef } from "react";
import ScopedCssBaseline from '@mui/material/ScopedCssBaseline';
import Box from '@mui/material/Box';
import TextField from '@mui/material/TextField';
import Button from '@mui/material/Button';

const FormData = ({ justDummy }) => {
  const formRef = useRef(null);
  // 声明ID和日期状态
  const [id, setId] = useState(0);
  const [currentDate, setCurrentDate] = useState('');

  // 表单提交逻辑单独抽离，方便手动/自动调用
  const submitFormData = async () => {
    // 这里写你需要的提交逻辑，比如提交到Firestore
    console.log('提交的数据：', { id, date: currentDate });
  };

  const handleSubmit = (e) => {
    e.preventDefault();
    submitFormData();
  };

  useEffect(() => {
    // 1. 页面加载时ID自增逻辑
    // 这里可以替换为从Firestore读取最新ID的逻辑，示例使用本地存储演示
    const lastId = Number(localStorage.getItem('latestFormId')) || 100;
    const newId = lastId + 1;
    setId(newId);
    // 更新存储的最新ID
    localStorage.setItem('latestFormId', newId);
    
    // 赋值当前日期
    const now = new Date().toLocaleDateString();
    setCurrentDate(now);

    // 2. 页面加载完成自动提交
    submitFormData();
  }, []);

  return (
    <>
      <ScopedCssBaseline />
      <form onSubmit={handleSubmit} ref={formRef} autoComplete="off">
        <Box sx={{ display: "flex", mt: 3 }}>
          <TextField
            onChange={() => console.log("")}
            value={id}
            type="number"
            placeholder="100"
            variant="outlined"
            fullWidth
            size="small"
            required
            color="primary"
            label="ID"
            disabled
          />
          <Box sx={{ mx: 0.5 }} />
          <TextField
            onChange={() => console.log("")}
            value={currentDate}
            placeholder="Current Date"
            variant="outlined"
            fullWidth
            size="small"
            color="primary"
            label="日期"
            disabled
          />
        </Box>
        <Box sx={{ mt: 1 }}>
          <Button
            type="submit"
            fullWidth
            variant="outlined"
            color="primary"
            disabled
          >
            提交数据
          </Button>
        </Box>
      </form>
    </>
  );
};

export default FormData;

关键逻辑说明 #

• 移除了原代码中重复嵌套的form标签，避免ref绑定冲突导致的调用异常
• 原formRef.current.submit()是原生DOM提交方法，不会触发React绑定的onSubmit事件，因此调整为直接调用抽离后的提交逻辑函数，自动提交即可生效
• ID自增逻辑可根据实际需求替换：如果从Firestore读取最新ID，只需在useEffect中调用Firestore查询接口拿到最新ID后加1赋值即可，适配你搭配Cron Job运行的场景
• 所有状态都完成初始化后才执行提交，避免提交空值问题

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