用 <Popup> 警报消息而不是alert()来反应表单

Question

我正在尝试在 React 中创建联系表单。它发送电子邮件。一切正常。我想要实现的是使用 React Popup 包用更好看的 < Popup> 消息替换警报（''）。 这是代码：

import React, { Component } from 'react';
import '../css/Contact.css';
import axios from 'axios';
import Popup from "reactjs-popup";

class Contact extends Component {

    constructor(props) {
        super(props);
        this.state = {
            name: '',
            email: '',
            message: '',
            isValid: false
        };
        this.handleChange = this.handleChange.bind(this);
        this.handleSubmit = this.handleSubmit.bind(this);
        this.validationCheck = this.validationCheck.bind(this);
    }

    handleChange = (event) => {
        const name = event.target.id;
        const value = event.target.value;
        this.setState ({ [name] : value});

    }

    validationCheck () {

        if((this.state.name.length)>3 &&
           (this.state.message.length)>5 &&
           (this.state.email.length)>7 &&
           (this.state.email.includes("@")) &&
           (this.state.email.includes(".")) &&
           ((this.state.name || this.state.message || this.state.message)!=0)
           )
        {
            this.setState({ isValid: true});
            this.forceUpdate();
        };

    }

    async handleSubmit (event) {
        this.validationCheck();
        this.forceUpdate();
        if ((this.state.isValid) === true) {
            event.preventDefault();         
            const { name, email, message } = this.state;
            const form = await axios.post('/api/form', {
            name,
            email,
            message
           });
                alert('thank you for your message');
                event.target.reset();


        }
        else {
            event.preventDefault();
            alert('you might have entered something wrong');
        }


        }


    render() {    
        return (
        <div className="contact">
        <h1>Contact Me</h1>
        <form id="form" onSubmit={this.handleSubmit}>
          <div>
            <label htmlFor="Name" className="badge badge-secondary">Name</label>
            <input 
            onChange={this.handleChange} id="name" className="form-control" placeholder="Enter your name here."/>
          </div>
          <div>
            <label htmlFor="Email" className="badge badge-secondary">Email address</label>
            <input 
            onChange={this.handleChange}
            id="email"
            className="form-control"
            placeholder="Enter your e-mail address here." />
          </div>
          <div className="">
            <label htmlFor="Message" className="badge badge-secondary">Message</label>
            <textarea 
            onChange={this.handleChange} rows="4"
            className="form-control" id="message" placeholder="Enter your message here."></textarea>
          </div>
          <button 
             type="submit" 
             form="form" 
             className="btn btn-secondary btn-lg button" 
             id="submit"
             value="Submit"> Send! </button>

        </form>
        <hr />
        <button type="button" className="btn btn-outline-info" onClick={this.props.scrollToTop}>
        Scroll me back to the top!</button>

        </div>
        );
    }

}

export default Contact;

我尝试替换 'alert('谢谢您的留言');'与返回（< Popup>）；但这显然不是前进的道路。

Answer 1

这是一种如何准确使用reactjs-popup的方法：

import React from "react";
import Popup from "reactjs-popup";

export default () => (
  <Popup trigger={<button> Trigger</button>} position="right center">
    <div>Popup content here !!</div>
  </Popup>
);

您所需要做的就是为其设置一个触发器，它就会起作用

寻求帮助：https://react-popup.netlify.com/