Отображение сообщения об успехе при отправке формы с помощью реакции-ловушки с использованием ловушек - PullRequest
Новая
       32

Отображение сообщения об успехе при отправке формы с помощью реакции-ловушки с использованием ловушек

0 голосов
/ 22 апреля 2020

У меня есть форма, которая правильно выполняет проверку ошибок, но у меня возникают проблемы при попытке показать сообщение об успехе, если все заполнено и отправлено. Я использую пакет response-hook-form и не могу найти ничего в документации.

Я создал errorMessage, это просто переключатель, использующий response-hook-form do c tips 

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;

1 Ответ

0 голосов
/ 22 апреля 2020

Привет, если вы хотите показать сообщение, вы можете использовать следующий пример, который может помочь вам показать сообщение. 

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>
    );
}
...