首页 > 解决方案 > 使用 React Hook 加载页面时自动提交表单

问题描述

Chen Lay 的自动提交表单截屏

  1. 加载页面时,我确实想自动增加 1
  2. 当页面完全加载时,我确实想自动提交表单而不点击提交按钮

我这样做的原因是因为我计划与我自己的 Cron Job 一起使用。提前致谢。

请指导我如何处理它?

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

import { useState, useEffect, useRef } from "react";

// TODO: Main Form UI
const FormData = ({ justDummy }) => {
  // TODO: FORM REF
  const formRef = useRef(null);

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

  useEffect(() => {
    // * This didn't work!
    // formRef.current.submit()
  }, []);

  return (
    <>
      <ScopedCssBaseline />
      <form onSubmit={handleSubmit} ref={formRef} autoComplete="off">
        <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="Date"
              disabled
            />
          </Box>
          <Box sx={{ mt: 1 }}>
            <Button
              type="submit"
              fullWidth
              variant="outlined"
              color="primary"
              disabled
            >
              Submit Data
            </Button>
          </Box>
        </form>
      </form>
    </>
  );
};

export default FormData;

标签: node.jsreactjsfirebase-realtime-databasenext.jsvercel

解决方案


我已经解决了那个问题。我删除了 onSubmit 函数并使用 React Ref 替换,然后使用 Ajax。


推荐阅读