如何使用 useForm 钩子获取输入值，然后使用 json-server 执行 POST？

Posted 2023-03-27

【中文标题】如何使用 useForm 钩子获取输入值，然后使用 json-server 执行 POST？

【英文标题】：How can i get an input value with useForm hook and then perform a POST with json-server?

【发布时间】：2021-08-12 10:06:33

【问题描述】：

我是 ReactJs 的新手，正在尝试使用 json-server 在假 API 中创建 CRUD。如何正确使用 useForm Hook 并执行用户名和电子邮件的 POST？

import React from "react";
import  useForm  from "react-hook-form";

import Form from "../Form";
import Field from "../Field";
import Button from "../Button";

const FormNew = () => 
  const  register, handleSubmit  = useForm();

  const newUser = (user) => 
    console.log(user);
    const url = "http://localhost:3002/posts";
    fetch(url, 
      method: "POST",
      headers: 
        "Content-type": "application/json",
      ,
      body: JSON.stringify(
        name: "example-name",
        email: "[e-mail]",
      ),
    )
      .then((resp) => resp.json())
      .then((user) => 
        console.log("User created success", user);
      );
  ;

  return (
    <Form onSubmit=handleSubmit(newUser)>
      <Field.Text label="Name" name="name" type="text" ...register />
      <Field.Text label="Email" name="email" type="email" ...register />
      <Button>Submit</Button>
    </Form>
  );
;
export default FormNew;

【参考方案1】：

您必须在 组件上注册您的价值键

<Form onSubmit=handleSubmit(newUser)>
  <Field.Text label="Name" name="name" type="text" ...register('name') />
  <Field.Text label="Email" name="email" type="email" ...register('email') />
  <Button>Submit</Button>
</Form>