当用户添加项目时，如何发送敬酒消息？

Question

import React from 'react';

import { useForm } from "react-hook-form"; import { toast } from 'react-toastify';

const AddStorage = () => { const { register, handleSubmit } = useForm();

const onSubmit = data => {
    console.log(data);
    const url = `https://desolate-springs-82685.herokuapp.com/storage`;
    fetch(url, {
        method: 'POST',
        headers: {
            'content-type': 'application/json'
        },
        body: JSON.stringify(data)
    })
        .then(res => res.json())
        .then(result => {
            console.log(result);
             toast('Congrats! You added an order');
        })
};

return (
    <div className='w-50 mx-auto mb-5 mt-5 pb-5 pt-5'>
        <h2 className='text-center mb-4' >Please add a Storage</h2>
        <form className='d-flex flex-column' onSubmit={handleSubmit(onSubmit)}>
            <input className='mb-2' placeholder='Photo URL' type="text" {...register("img")} />
            <input className='mb-2' placeholder='Name' {...register("name", { required: true, maxLength: 20 })} />
            <input className='mb-2' placeholder='Capacity' type="number and text" {...register("capacity")} />
            <textarea className='mb-3' placeholder='Description' {...register("description")} />
            <input className='btn-success mb-4' type="submit" value="Add Storage" />
        </form>
    </div>
);

};

export default AddStorage;

Answer 1

您需要将ToastContainer添加到您的组件中，然后只需像这样使用toast函数：

toast.success('YOUR MESSAGE',{TOAST CONFIG})

Answer 2

First you need to import ToastContainer from the package library like this

import { ToastContainer, toast } from 'react-toastify';

Read more about usage of ToastContainer component in the link

ToastContainer is a container , where you want to show your error message , how to use it

import * as React from 'react';
import { ToastContainer, toast } from 'react-toastify';

const Articles = () => {
    const markAsHome = () => {
        toast.success(`Article successfuly defined as a recent article` );
    }
    return (
        <>
            <ToastContainer />
            <button onClick={markAsHome}> Mark As Home </button>
        </>
    );
}

export default Articles;