使用表格
一个常见的情况是处理表格的逻辑,可以为自定义钩提取
// form.tsximport { formeventhandler, usestate } from "react";function forms() { const [title, settitle] = usestate(""); const [price, setprice] = usestate(""); const [description, setdescription] = usestate(""); const [image, setimage] = usestate(""); const [category, setcategory] = usestate(""); const [data, setdata] = usestate(null); const [isloading, setisloading] = usestate(false); const [error, seterror] = usestate(null); const handlesubmit: formeventhandler = async (e) => { try { setisloading(true); e.preventdefault(); const response = await fetch("https://fakestoreapi.com/products", { method: "post", body: json.stringify({ title, price, description, image, category, }), }); const data = await response.json(); setdata(data); } catch (e) { seterror(e); } finally { setisloading(false); } }; return ( settitle(value)} /> setprice(value)} />
>在核心上,该组件涉及创建产品的想法,具有状态
>对于每个形式的字段和形式的状态
可以通过步骤完成此组件的重写。在处理请求的示例中,我们可以享受一部分我们所做的事情:
>
提取请求状态
// usemutate.tsximport { usecallback, usestate } from "react";export type usemutateparams = { mutation: (args: a) => promise;};export function usemutate({ mutation }: usemutateparams) { const [isloading, setisloading] = usestate(false); const [error, seterror] = usestate(null); const [data, setdata] = usestate(null); const mutate = usecallback( async (args: a) => { try { setisloading(true); const data = await mutation(args); setdata(data); } catch (e) { seterror(e); } finally { setisloading(false); } }, [mutation], ); return { isloading, error, data, mutate, };}
// form.tsximport { formeventhandler, usestate } from "react";import { usemutate } from "../hooks/usemutate.tsx";function forms() { const [title, settitle] = usestate(""); const [price, setprice] = usestate(""); const [description, setdescription] = usestate(""); const [image, setimage] = usestate(""); const [category, setcategory] = usestate(""); const { mutate, data, isloading, error } = usemutate({ mutation: async (body) => { const response = await fetch("https://fakestoreapi.com/products", { method: "post", body: json.stringify(body), }); return response.json(); }, }); const handlesubmit: formeventhandler = async (e) => { e.preventdefault(); await mutate( json.stringify({ title, price, description, category, image, }), ); }; return ( settitle(value)} /> setprice(value)} />
驱动器表单字段
import { formeventhandler } from "react";import { usemutate } from "../hooks/usemutate.tsx";function forms() { const { mutate, data, isloading, error } = usemutate({ mutation: async (body) => { const response = await fetch("https://fakestoreapi.com/products", { method: "post", body: json.stringify(body), }); return response.json(); }, }); const handlesubmit: formeventhandler = async (event) => { event.preventdefault(); const form = event.target as htmlformelement; const formdata = new formdata(form); await mutate( json.stringify({ title: formdata.get("title"), price: formdata.get("price"), description: formdata.get("description"), category: formdata.get("category"), image: formdata.get("image"), }), ); }; return ( electronics jewelery men's clothing women's clothing error: {json.stringify(error)} response: {json.stringify(data)} );}export default forms;
将请求移至您自己的钩子
// useproductcreate.tsximport { usemutate } from "./usemutate.tsx";async function fetchproductcreate(body) { const response = await fetch("https://fakestoreapi.com/products", { method: "post", body: json.stringify(body), }); return response.json();}export function useproductcreate() { return usemutate({ mutation: (formdata: formdata) => { const payload = { title: formdata.get("title"), price: formdata.get("price"), description: formdata.get("description"), category: formdata.get("category"), image: formdata.get("image"), }; return fetchproductcreate(payload); }, });}
// Form.tsximport { FormEventHandler } from "react";import { useProductCreate } from "../hooks/useProductCreate";function Forms() { const { data, mutate, isLoading, error } = useProductCreate(); const handleSubmit: FormEventHandler = async (event) => { event.preventDefault(); const formData = new FormData(event.target as HTMLFormElement); await mutate(formData); }; return ( electronics jewelery men's clothing women's clothing Error: {JSON.stringify(error)} Response: {JSON.stringify(data)} );}export default Forms;
以上就是在实践中反应:用钩子改善形式的详细内容,更多请关注创想鸟其它相关文章!
版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至 chuangxiangniao@163.com 举报,一经查实,本站将立刻删除。
发布者:程序猿,转转请注明出处:https://www.chuangxiangniao.com/p/1501496.html
微信扫一扫
支付宝扫一扫