时间戳

首页 > 解决方案 > 无法写入文本字段

javascript - 无法写入文本字段

问题描述

我对 react 很陌生，我正在使用 react-hook 和 useState 构建一个表单来在提交后管理我的数据。

我无法使用文本字段，因为它们被阻止了。我认为我在 value/onChange 参数中犯了一些错误，但我不知道是什么类型的错误。

import React, { useState } from "react";

import {
  TextField,
  MenuItem,
  Typography,
  Checkbox,
  Divider,
  Button,
} from "@mui/material";
import { MdError } from "react-icons/md";
import { BsArrowRight } from "react-icons/bs";
import "../style/contactform.scss";

import { useForm } from "react-hook-form";

const initialState = {
  name: "",
  email: "",
};

const ContactForm = () => {
  const {
    register,
    handleSubmit,
    formState: { errors },
  } = useForm();

  const [state, setState] = useState(initialState);
  const { name, email } = state;

  const handleInputChange = (e) => {
    const { name, value } = e.target;
    setState({ ...state, [name]: value });
  };

  const onSubmit = (e) => {
    e.preventDefault();
    console.log("form submit");
    setState(initialState);
  };

  return (
    <form className="contact-form" onSubmit={handleSubmit(onSubmit)}>
      <Typography variant="h4" className="form-title">
        Be the first.
      </Typography>

      <div className="form-component">
        <TextField
          id="standard-basic"
          label="Nome*"
          variant="standard"
          name="nome"
          value={name}
          onChange={handleInputChange}
          {...register("nome", {
            required: true,
          })}
        />

        {errors?.nome?.type === "required" && (
          <MdError className="form-validation-icon" />
        )}
      </div>

      <Divider className="form-hr" />

      <div className="form-component">
        <TextField
          id="standard-basic"
          label="Email*"
          variant="standard"
          name="email"
          value={email}
          onChange={handleInputChange}
          {...register("email", {
            required: true,
            pattern: {
              value:
                /^[a-zA-Z0-9.!#$%&’*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*$/,
            },
          })}
        />

        {errors?.email?.type === "required" && (
          <MdError className="form-validation-icon" />
        )}
        {errors?.email?.type === "pattern" && (
          <Typography variant="p" className="form-validation-email">
            Inserisci un indirizzo email valido.
          </Typography>
        )}
      </div>

      <Divider className="form-hr" />

      <Button className="form-submit" type="submit" variant="contained">
        <BsArrowRight />
      </Button>
    </form>
  );
};

export default ContactForm;

文本字段完全被阻塞，但初始状态实际上正在工作，我错过了什么吗？你能帮助我吗？

标签： javascriptreactjsreact-hooksuse-statereact-hook-form

解决方案

要使用 useForm 钩子分配初始值，请在defaultValues传递给钩子的参数下传递它，如下所示：

const {
    register,
    handleSubmit,
    reset
    formState: { errors },
  } = useForm({
    defaultValues: initialState
  });

然后只需将...register名称和电子邮件传递给输入。无需再次为它们赋值：

<TextField
  id="standard-basic"
  label="Name*"
  variant="standard"
  name="name"
  {...register("name", {
    required: true,
  })}
/>

// for the email..
<TextField
  id="standard-basic"
  label="Email*"
  variant="standard"
  name="email"
  {...register("email", {
    required: true,
    pattern: {
      value: /^[a-zA-Z0-9.!#$%&’*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*$/,},
  })}
/>

如果您注意到，这些值已经不在文本字段中，并且也不需要该handleInputChange函数。useForm 钩子会处理这个问题。

编辑：除了onSubmit函数之外，handleSubmitfrom useForm 将一个数据对象传递给函数，如下所示：

const onSubmit = (data) => {
  console.log("form submitted", data);
  reset(); // this can be destructured of the `useForm` hook.
};

有关更多信息，请查看他们的文档

推荐阅读