reactjs - 表单值在提交时为空白

Question

无法email and token从下表中选择值。点击提交时显示为空白。谁能告诉我哪里做错了？

https://codesandbox.io/s/dazzling-kirch-1gqq4?file=/src/App.js

import React, { useRef, useEffect, useState } from "react";
import { useForm } from "react-hook-form";
import Axios from "axios";

const CreateLink = () => {
  const [email, setEmail] = useState("");
  const [token, setToken] = useState("");
  const {
    handleSubmit,
    register,
    formState: { errors }
  } = useForm();

  const onSubmit = (e) => {
    e.preventDefault();
    alert(`Sending Email ${email}`);
    const fetchData = async () => {
      try {
        const res = await Axios.post(
          "http://localhost:8000/service/createlink",
          email,
          token
        );
        if (res.data.success) {
          console.log("Link token created:" + res.data.success);
        }
      } catch (e) {
        console.log(e);
      }
    };
    fetchData();
  };

  return (
    <div className="App">
      <h1>Create Link</h1>
      <form onSubmit={handleSubmit(onSubmit)} className="linkForm inputForm">
        <div className="inputField">
          <input
            name="email"
            placeholder="email"
            type="text"
            value={email}
            onChange={(e) => setEmail(e.target.value)}
            {...register("email", {
              required: "Email is required",
              pattern: {
                value: /^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,4}$/i,
                message: "Invalid email address"
              }
            })}
          />
          <span className="loginErrorTextFormat">
            {errors.email && <p>{errors.email.message}</p>}
          </span>
        </div>
        <div className="inputField">
          <input
            placeholder="token"
            name="token"
            type="text"
            value={token}
            onChange={(e) => setToken(e.target.value)}
            {...register("token", {
              required: "Token is required"
            })}
          />
          <span className="loginErrorTextFormat">
            {errors.token && <p>Input is not valid</p>}
          </span>
        </div>
        <input type="submit" />
      </form>
    </div>
  );
};

export default CreateLink;

标签： reactjsreact-hooks

Answer 1

因为register返回一个对象有属性onChange。所以它会覆盖你的，onChange你只需要移动onChangeregister

    {...register("token", {
      required: "Token is required"
    })}
    onChange={(e) => setToken(e.target.value)}