首页 > 文章 > 前端

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

来源：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 (
    
      title:
      <input
        type="text"
        id="title"
        name="title"
        value={title}
        onchange={({ target: { value } }) => settitle(value)}
      />

      price:
      <input
        type="number"
        id="price"
        name="price"
        value={price}
        onchange={({ target: { value } }) => setprice(value)}
      />

      description:
      <textarea
        id="description"
        name="description"
        value={description}
        onchange={({ target: { value } }) => setdescription(value)}
      />

      image:
      <input
        type="url"
        id="image"
        name="image"
        onchange={({ target: { value } }) => setimage(value)}
      />

      category:
      <select
        id="category"
        name="category"
        value={category}
        onchange={({ target: { value } }) => setcategory(value)}
      >
        
        
        
        
      </select>

      

      error: {json.stringify(error)}
      response: {json.stringify(data)}
    
  );
}

export default forms;

>在核心上，该组件涉及创建产品的想法，具有状态

> 对于每个形式的字段和形式的状态
可以通过步骤完成此组件的重写。在处理请求的示例中，我们可以享受一部分我们所做的事情：

提取请求状态

// usemutate.tsx

import { 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.tsx
import { 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 (
    
      title:
      <input
        type="text"
        id="title"
        name="title"
        value={title}
        onchange={({ target: { value } }) => settitle(value)}
      />

      price:
      <input
        type="number"
        id="price"
        name="price"
        value={price}
        onchange={({ target: { value } }) => setprice(value)}
      />

      description:
      <textarea
        id="description"
        name="description"
        value={description}
        onchange={({ target: { value } }) => setdescription(value)}
      />

      image:
      <input
        type="url"
        id="image"
        name="image"
        onchange={({ target: { value } }) => setimage(value)}
      />

      category:
      <select
        id="category"
        name="category"
        value={category}
        onchange={({ target: { value } }) => setcategory(value)}
      >
        
        
        
        
      </select>

      

      error: {json.stringify(error)}
      response: {json.stringify(data)}
    
  );
}

export default forms;

驱动器表单字段

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 (
    
      title:
      <input type="text" id="title" name="title" />

      price:
      <input type="number" id="price" name="price" />

      description:
      <textarea id="description" name="description" />

      image:
      <input type="url" id="image" name="image" />

      category:
      <select id="category" name="category">
        
        
        
        
      </select>

      

      error: {json.stringify(error)}
      response: {json.stringify(data)}
    
  );
}

export default forms;

将请求移至您自己的钩子

// useproductcreate.tsx
import { 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.tsx

import { 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 (
    
      Title:
      <input type="text" id="title" name="title" />

      Price:
      <input type="number" id="price" name="price" />

      Description:
      <textarea id="description" name="description" />

      Image:
      <input type="url" id="image" name="image" />

      Category:
      <select id="category" name="category">
        
        
        
        
      </select>

      

      Error: {JSON.stringify(error)}
      Response: {JSON.stringify(data)}
    
  );
}

export default Forms;

今天关于《在实践中反应：用钩子改善形式》的内容就介绍到这里了，是不是学起来一目了然！想要了解更多关于的内容请关注golang学习网公众号！

声明：本文转载于：dev.to 如有侵犯，请联系study_golang@163.com删除