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

心靈之曲

发布时间：2025-02-16 11:16:26

871人浏览过

来源于dev.to

转载

使用表格

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

// 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<any>(null);
  const [isloading, setisloading] = usestate(false);
  const [error, seterror] = usestate<any>(null);

  const handlesubmit: formeventhandler<htmlformelement> = 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 (
    <form
      style={{ display: "flex", flexflow: "column", gap: 10 }}
      onsubmit={handlesubmit}
    >
      <label htmlfor="name">title:</label>
      <input
        type="text"
        id="title"
        name="title"
        value={title}
        onchange={({ target: { value } }) => settitle(value)}
      />

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

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

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

      <label htmlfor="category">category:</label>
      <select
        id="category"
        name="category"
        value={category}
        onchange={({ target: { value } }) => setcategory(value)}
      >
        <option value="electronics">electronics</option>
        <option value="jewelery">jewelery</option>
        <option value="men's clothing">men's clothing</option>
        <option value="women's clothing">women's clothing</option>
      </select>

      <button disabled={isloading} type="submit">
        send
      </button>

      <div>error: {json.stringify(error)}</div>
      <div>response: {json.stringify(data)}</div>
    </form>
  );
}

export default forms;

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

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

提取请求状态

// usemutate.tsx

import { usecallback, usestate } from "react";

export type usemutateparams<t, a> = {
  mutation: (args: a) => promise<t>;
};

export function usemutate<t, a>({ mutation }: usemutateparams<t, a>) {
  const [isloading, setisloading] = usestate(false);
  const [error, seterror] = usestate<any>(null);
  const [data, setdata] = usestate<t | null>(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<htmlformelement> = async (e) => {
    e.preventdefault();

    await mutate(
      json.stringify({
        title,
        price,
        description,
        category,
        image,
      }),
    );
  };

  return (
    <form
      style={{ display: "flex", flexflow: "column", gap: 10 }}
      onsubmit={handlesubmit}
    >
      <label htmlfor="name">title:</label>
      <input
        type="text"
        id="title"
        name="title"
        value={title}
        onchange={({ target: { value } }) => settitle(value)}
      />

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

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

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

      <label htmlfor="category">category:</label>
      <select
        id="category"
        name="category"
        value={category}
        onchange={({ target: { value } }) => setcategory(value)}
      >
        <option value="electronics">electronics</option>
        <option value="jewelery">jewelery</option>
        <option value="men's clothing">men's clothing</option>
        <option value="women's clothing">women's clothing</option>
      </select>

      <button disabled={isloading} type="submit">
        send
      </button>

      <div>error: {json.stringify(error)}</div>
      <div>response: {json.stringify(data)}</div>
    </form>
  );
}

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<htmlformelement> = 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 (
    <form
      style={{ display: "flex", flexflow: "column", gap: 10 }}
      onsubmit={handlesubmit}
    >
      <label htmlfor="name">title:</label>
      <input type="text" id="title" name="title" />

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

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

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

      <label htmlfor="category">category:</label>
      <select id="category" name="category">
        <option value="electronics">electronics</option>
        <option value="jewelery">jewelery</option>
        <option value="men's clothing">men's clothing</option>
        <option value="women's clothing">women's clothing</option>
      </select>

      <button disabled={isloading} type="submit">
        send
      </button>

      <div>error: {json.stringify(error)}</div>
      <div>response: {json.stringify(data)}</div>
    </form>
  );
}

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<HTMLFormElement> = async (event) => {
    event.preventDefault();

    const formData = new FormData(event.target as HTMLFormElement);

    await mutate(formData);
  };

  return (
    <form
      style={{ display: "flex", flexFlow: "column", gap: 10 }}
      onSubmit={handleSubmit}
    >
      <label htmlFor="name">Title:</label>
      <input type="text" id="title" name="title" />

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

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

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

      <label htmlFor="category">Category:</label>
      <select id="category" name="category">
        <option value="electronics">electronics</option>
        <option value="jewelery">jewelery</option>
        <option value="men's clothing">men's clothing</option>
        <option value="women's clothing">women's clothing</option>
      </select>

      <button disabled={isLoading} type="submit">
        Send
      </button>

      <div>Error: {JSON.stringify(error)}</div>
      <div>Response: {JSON.stringify(data)}</div>
    </form>
  );
}

export default Forms;

Gomoku AI 的 Minimax 实现中阻止对手获胜的关键修复

Gomoku AI 的 Minimax 实现中胜负判断逻辑错误导致忽略防守

javascript是什么_它能用来做什么呢

javascript能做什么_有哪些意想不到的实际应用？

JavaScript机器学习应用_javascript人工智能

相关专题

TypeScript类型系统进阶与大型前端项目实践

本专题围绕 TypeScript 在大型前端项目中的应用展开，深入讲解类型系统设计与工程化开发方法。内容包括泛型与高级类型、类型推断机制、声明文件编写、模块化结构设计以及代码规范管理。通过真实项目案例分析，帮助开发者构建类型安全、结构清晰、易维护的前端工程体系，提高团队协作效率与代码质量。

2026.03.13

Python异步编程与Asyncio高并发应用实践

本专题围绕 Python 异步编程模型展开，深入讲解 Asyncio 框架的核心原理与应用实践。内容包括事件循环机制、协程任务调度、异步 IO 处理以及并发任务管理策略。通过构建高并发网络请求与异步数据处理案例，帮助开发者掌握 Python 在高并发场景中的高效开发方法，并提升系统资源利用率与整体运行性能。

2026.03.12

C# ASP.NET Core微服务架构与API网关实践

本专题围绕 C# 在现代后端架构中的微服务实践展开，系统讲解基于 ASP.NET Core 构建可扩展服务体系的核心方法。内容涵盖服务拆分策略、RESTful API 设计、服务间通信、API 网关统一入口管理以及服务治理机制。通过真实项目案例，帮助开发者掌握构建高可用微服务系统的关键技术，提高系统的可扩展性与维护效率。

140

2026.03.11

Go高并发任务调度与Goroutine池化实践

本专题围绕 Go 语言在高并发任务处理场景中的实践展开，系统讲解 Goroutine 调度模型、Channel 通信机制以及并发控制策略。内容包括任务队列设计、Goroutine 池化管理、资源限制控制以及并发任务的性能优化方法。通过实际案例演示，帮助开发者构建稳定高效的 Go 并发任务处理系统，提高系统在高负载环境下的处理能力与稳定性。

2026.03.10

Kotlin Android模块化架构与组件化开发实践

本专题围绕 Kotlin 在 Android 应用开发中的架构实践展开，重点讲解模块化设计与组件化开发的实现思路。内容包括项目模块拆分策略、公共组件封装、依赖管理优化、路由通信机制以及大型项目的工程化管理方法。通过真实项目案例分析，帮助开发者构建结构清晰、易扩展且维护成本低的 Android 应用架构体系，提升团队协作效率与项目迭代速度。

2026.03.09

JavaScript浏览器渲染机制与前端性能优化实践

本专题围绕 JavaScript 在浏览器中的执行与渲染机制展开，系统讲解 DOM 构建、CSSOM 解析、重排与重绘原理，以及关键渲染路径优化方法。内容涵盖事件循环机制、异步任务调度、资源加载优化、代码拆分与懒加载等性能优化策略。通过真实前端项目案例，帮助开发者理解浏览器底层工作原理，并掌握提升网页加载速度与交互体验的实用技巧。

102

2026.03.06

Rust内存安全机制与所有权模型深度实践

本专题围绕 Rust 语言核心特性展开，深入讲解所有权机制、借用规则、生命周期管理以及智能指针等关键概念。通过系统级开发案例，分析内存安全保障原理与零成本抽象优势，并结合并发场景讲解 Send 与 Sync 特性实现机制。帮助开发者真正理解 Rust 的设计哲学，掌握在高性能与安全性并重场景中的工程实践能力。

226

2026.03.05

PHP高性能API设计与Laravel服务架构实践

本专题围绕 PHP 在现代 Web 后端开发中的高性能实践展开，重点讲解基于 Laravel 框架构建可扩展 API 服务的核心方法。内容涵盖路由与中间件机制、服务容器与依赖注入、接口版本管理、缓存策略设计以及队列异步处理方案。同时结合高并发场景，深入分析性能瓶颈定位与优化思路，帮助开发者构建稳定、高效、易维护的 PHP 后端服务体系。

506

2026.03.04