2

我有一个表单可以正确地进行错误验证，但如果所有内容都填写并提交，则无法显示成功消息。我正在使用 react-hook-form 包，但在文档中找不到任何内容。

我已经使用 react-hook-form 文档提示创建了 errorMessage，它只是一个开关

import React from "react";
import { useForm } from "react-hook-form";
import ErrorMessage from "./errorMessage";
import CustomButton from "../../../commons/custom-button/custom-button.component";



function JobAlertWidget() {
const {
register,
handleSubmit,
errors,
formState: { isSubmitting },
reset,
} = useForm();
const onSubmit = (data) => {
console.log(JSON.stringify(data));
reset();
};

return (
 <div className="job-alert-container">
  <form class="job-alert-form" onSubmit={handleSubmit(onSubmit)}>
    <p className="form-title">{title}</p>
    <div className="inner-container">
      <p className="first_content">{first_content}</p>
      <p className="second_content">{second_content}</p>
      <div className="inputs">
        <input
          type="text"
          name="firstName"
          className="firstName"
          placeholder="First Name"
          ref={register({ required: true, minLength: 2 })}
        />
        <ErrorMessage error={errors.firstName} />
        <input
          type="text"
          className="lastName"
          name="lastName"
          placeholder="Last Name"
          ref={register({ required: true, minLength: 2 })}
        />
        <ErrorMessage error={errors.firstName} />
        <input
          type="email"
          name="email"
          className="email"
          placeholder="Email Address"
          ref={register({ required: true, pattern: /^\S+@\S+$/i })}
        />
        <ErrorMessage error={errors.email} />
        <input
          type="number"
          name="phone"
          className="phone"
          placeholder="Mobile Phone"
          ref={register({ required: true })}
        />
        <ErrorMessage error={errors.phone} />
      </div>
    </div>
    <div className="link">
      <CustomButton className="heroLink" disabled={isSubmitting}>
        {link}
      </CustomButton>
    </div>
  </form>
</div>
);
}

导出默认 JobAlertWidget；

4

2 回答 2

0

有点晚了。但是如果你想显示来自 react-hook-form 的错误消息，你必须像这样指定它：errors.phone.message

于 2021-02-03T10:11:46.160 回答
-1

嗨，如果您想显示消息，那么您可以使用以下示例来帮助您显示消息。

import React, {useState} from "react";
import Button from "@material-ui/core/Button";
import Snackbar from "@material-ui/core/Snackbar";

export default function SnackbarExample() {
    const [state, setState] = useState({
        open: false,
        vertical: 'top',
        horizontal: 'center',
    });

    const {vertical, horizontal, open} = state;

    const handleClick = (newState) => () => {
        setState({open: true, ...newState});
    };

    const handleClose = () => {
        setState({...state, open: false});
    };

    return (
        <div>
            <Button onClick={handleClick({vertical: 'top', horizontal: 'center'})}>Top-Center</Button>
            <Button onClick={handleClick({vertical: 'top', horizontal: 'right'})}>Top-Right</Button>
            <Button onClick={handleClick({vertical: 'bottom', horizontal: 'right'})}>
                Bottom-Right
            </Button>
            <Button onClick={handleClick({vertical: 'bottom', horizontal: 'center'})}>
                Bottom-Center
            </Button>
            <Button onClick={handleClick({vertical: 'bottom', horizontal: 'left'})}>Bottom-Left</Button>
            <Button onClick={handleClick({vertical: 'top', horizontal: 'left'})}>Top-Left</Button>
            <Snackbar
                anchorOrigin={{vertical, horizontal}}
                key={`${vertical},${horizontal}`}
                open={open}
                onClose={handleClose}
                message="This is the message"
            />
        </div>
    );
}
于 2020-04-22T19:06:59.137 回答