【问题标题】:Auto submits the form when the page is loaded using React Hook使用 React Hook 加载页面时自动提交表单
【发布时间】:2021-10-27 23:14:43
【问题描述】:

  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;

【问题讨论】:

  • 除非用户实际触发了事件,否则您不能发出用户事件。您可以做的是在 useEffect 挂钩中发送一个带有数据的 formData 对象的 ajax 请求。
  • 你有 2 个表格。
  • 我从我的 api 中检索 ajax 数据并填充到现有表单中,然后我使用 Firebase 实现以通过提交表单来存储该 API 数据。

标签: node.js reactjs firebase-realtime-database next.js vercel


【解决方案1】:

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

【讨论】:

    猜你喜欢
    • 2013-05-11
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多