提交表单时 ref to form element 为 null
ref to form element is null when submitting the form
我有一个表单应该将文件(图像)上传到 NextJs API 路由。我尝试使用对表单的引用来检索表单值。但是,当我尝试访问 onSubmit 函数中的表单时,ref 仍然为空。我知道 refs 在第一次渲染时可以为 null,但我假设在提交表单时,ref 应该被解析。
表格是这样的:
<form ref={formRef} onSubmit={onFormSubmit}>
<label htmlFor="image">Image:</label>
<input id="image" accept="image/*" multiple={false} onChange={onImageChange} name="image" type="file" required />
<button type="submit">Upload</button>
</form>
这是(功能)组件的其余部分的样子:
const UploadImageModal = (): JSX.Element => {
const formRef = useRef<HTMLFormElement>(null)
const onFormSubmit = async (event: SubmitEvent) => {
event.preventDefault()
console.log(formRef.current) //Shows null
const data = new FormData(formRef.current)
const res = await fetch('/api/upload-image', {
method: 'POST',
body: data
})
}
return (/* The component including the form */)
}
我正在使用 TypeScript,但我认为这无关紧要,因为 TypeScript 在运行时没有影响。我遗漏了任何我认为与这个问题无关的东西,比如样式和其他不涉及表单的组件。
API 路由已经使用 Postman 进行了测试,并且可以正常工作。如果有一种方法可以直接从 SubmitEvent 获取表单数据,那也是一个很好的解决方案。我以为表单数据会通过该事件公开,但它并没有让我到任何地方。
感谢所有花时间帮助我的人!
我在下面附上了工作代码和 Codesandbox。
https://codesandbox.io/s/react-functional-component-form-usage-with-typescript-16ghf?file=/src/App.tsx
import "./styles.css";
import { SyntheticEvent, useRef } from "react";
const UploadImageModal = (): JSX.Element => {
const formRef = useRef() as React.MutableRefObject<HTMLFormElement>;
const onFormSubmit = async (event: SyntheticEvent) => {
event.preventDefault();
console.log(formRef); //Shows null
const data = new FormData(formRef.current);
const res = await fetch("/api/upload-image", {
method: "POST",
body: data
});
};
return (
<form ref={formRef} onSubmit={onFormSubmit}>
<label htmlFor="image">Image:</label>
<input
id="image"
accept="image/*"
multiple={false}
name="image"
type="file"
required
/>
<button type="submit">Upload</button>
</form>
);
};
export default function App() {
return (
<div className="App">
<UploadImageModal />
</div>
);
}
您可以通过
获取表格DOM参考
const data = new FormData(event.target)
[信息]
您正在使用打字稿,因此处理程序的类型应该是
const onFormSubmit: FormEventHandler<HTMLFormElement > = async (event) => {
我有一个表单应该将文件(图像)上传到 NextJs API 路由。我尝试使用对表单的引用来检索表单值。但是,当我尝试访问 onSubmit 函数中的表单时,ref 仍然为空。我知道 refs 在第一次渲染时可以为 null,但我假设在提交表单时,ref 应该被解析。
表格是这样的:
<form ref={formRef} onSubmit={onFormSubmit}>
<label htmlFor="image">Image:</label>
<input id="image" accept="image/*" multiple={false} onChange={onImageChange} name="image" type="file" required />
<button type="submit">Upload</button>
</form>
这是(功能)组件的其余部分的样子:
const UploadImageModal = (): JSX.Element => {
const formRef = useRef<HTMLFormElement>(null)
const onFormSubmit = async (event: SubmitEvent) => {
event.preventDefault()
console.log(formRef.current) //Shows null
const data = new FormData(formRef.current)
const res = await fetch('/api/upload-image', {
method: 'POST',
body: data
})
}
return (/* The component including the form */)
}
我正在使用 TypeScript,但我认为这无关紧要,因为 TypeScript 在运行时没有影响。我遗漏了任何我认为与这个问题无关的东西,比如样式和其他不涉及表单的组件。
API 路由已经使用 Postman 进行了测试,并且可以正常工作。如果有一种方法可以直接从 SubmitEvent 获取表单数据,那也是一个很好的解决方案。我以为表单数据会通过该事件公开,但它并没有让我到任何地方。
感谢所有花时间帮助我的人!
我在下面附上了工作代码和 Codesandbox。 https://codesandbox.io/s/react-functional-component-form-usage-with-typescript-16ghf?file=/src/App.tsx
import "./styles.css";
import { SyntheticEvent, useRef } from "react";
const UploadImageModal = (): JSX.Element => {
const formRef = useRef() as React.MutableRefObject<HTMLFormElement>;
const onFormSubmit = async (event: SyntheticEvent) => {
event.preventDefault();
console.log(formRef); //Shows null
const data = new FormData(formRef.current);
const res = await fetch("/api/upload-image", {
method: "POST",
body: data
});
};
return (
<form ref={formRef} onSubmit={onFormSubmit}>
<label htmlFor="image">Image:</label>
<input
id="image"
accept="image/*"
multiple={false}
name="image"
type="file"
required
/>
<button type="submit">Upload</button>
</form>
);
};
export default function App() {
return (
<div className="App">
<UploadImageModal />
</div>
);
}
您可以通过
获取表格DOM参考const data = new FormData(event.target)
[信息] 您正在使用打字稿,因此处理程序的类型应该是
const onFormSubmit: FormEventHandler<HTMLFormElement > = async (event) => {