提交表单和 POST 请求

Question

我是 React 和 JavaScript 的新手。 我想提交一个基于 React 和 JavaScript 的表单：

      <form action='#' method="post" className='mt-4 register-form'>
        <div className='row'>
          <div className='col-sm-6'>
            <div className='input-group mb-3'>
              <input
                type='text'
                className='form-control'
                placeholder='Name'
                aria-label='name'
              />
            </div>
          </div>
          <div className='col-sm-6 '>
            <div className='input-group mb-3'>
              <input
                type='email'
                className='form-control'
                placeholder='Email'
                aria-label='email'
              />
            </div>
          </div>
           
          <div className='col-12'>
            <button
              type='submit'
              className='btn btn-primary mt-4 d-block w-100'
            >
              Get Started
            </button>
          </div>
        </div>
      </form>

服务：

let Contact = {
    name,
    email,
};


import axios from "axios";
import React from "react";

const baseURL = "https://jsonplaceholder.typicode.com/posts";

export default function SubmitContact(Contact) {

    const [post, setPost] = React.useState(null);

    function createPost(Contact) {
        axios
            .post(baseURL, Contact)
            .then((response) => {
                setPost(response.data);
            }).catch(...implement erorr messge here ...);
    }
}

您能指导我实现此代码的正确方法是什么吗？

Answer 1

用 react-hook-form 编辑

应用程序.js

import { useState } from "react";
import { submitContact } from "./services/sendData";
import { useForm, Controller } from "react-hook-form"; // library

export default function App() {
  const [post, setPost] = useState([]); // I think the data is array

  // REACT-HOOK-FORM
  const { control, handleSubmit } = useForm();

  const onSubmit = (json) => {
    // react-hook-form return a json
    try {
      submitContact(json).then((res) => {
        setPost(res.data);
      });
    } catch (e) {
      console.error(e);
    }
  };
  return (
    <div className="App">
      <form onSubmit={handleSubmit(onSubmit)} className="mt-4 register-form">
        <div className="row">
          <div className="col-sm-6">
            <div className="input-group mb-3">
              <Controller
                control={control}
                name={"name"} //  the key of json
                defaultValue={""}
                render={({ field }) => (
                  <input
                    {...field}
                    type="text"
                    className="form-control"
                    placeholder="Name"
                    aria-label="name"
                    onChange={(e) => field.onChange(e.target.value)} // the value
                  />
                )}
              />
            </div>
          </div>
          <div className="col-sm-6 ">
            <div className="input-group mb-3">
              <Controller
                control={control}
                name={"email"} //  the key of json
                defaultValue={""}
                render={({ field }) => (
                  <input
                    {...field}
                    type="text"
                    className="form-control"
                    placeholder="Email"
                    aria-label="name"
                    onChange={(e) => field.onChange(e.target.value)} // the value
                  />
                )}
              />
            </div>
          </div>

          <div className="col-12">
            <button
              type="submit"
              className="btn btn-primary mt-4 d-block w-100"
            >
              Get Started
            </button>
          </div>
        </div>
      </form>
    </div>
  );
}

服务文件夹

const baseURL = "https://jsonplaceholder.typicode.com/posts";

export const SubmitContact = (json) => {
  return axios.post(baseURL, json);
};