登录
首页 >  文章 >  前端

在实践中反应：用钩子改善形式

来源：dev.to

时间：2025-02-17 10:13:00 102浏览 收藏

知识点掌握了，还需要不断练习才能熟练运用。下面golang学习网给大家带来一个文章开发实战，手把手教大家学习《在实践中反应：用钩子改善形式》，在实现功能的过程中也带大家重新温习相关知识点，温故而知新，回头看看说不定又有不一样的感悟！

使用表格

一个常见的情况是处理表格的逻辑，可以为自定义钩提取 

// form.tsx
import { 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)}
      />