使用 React Hook 加载页面时自动提交表单
Auto submits the form when the page is loaded using React Hook
- 当页面加载时,我想自动增加1。
- 当页面完全加载后,我想自动提交表单而无需单击提交按钮。
我之所以这样做,是因为我打算与我自己的 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;
我已经解决了那个问题。我删除了 onSubmit 函数并替换为使用 React Ref 然后使用 Ajax.
- 当页面加载时,我想自动增加1。
- 当页面完全加载后,我想自动提交表单而无需单击提交按钮。
我之所以这样做,是因为我打算与我自己的 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;
我已经解决了那个问题。我删除了 onSubmit 函数并替换为使用 React Ref 然后使用 Ajax.