Реагируйте на форму с <Popup>предупреждением вместо alert () - PullRequest
Новая
       25

Реагируйте на форму с <Popup>предупреждением вместо alert ()

0 голосов
/ 21 октября 2018

Я пытаюсь создать контактную форму в React.Он отправляет электронное письмо.Все работает нормально.Чего я хотел бы добиться, так это заменить оповещение ('') более привлекательным сообщением , используя реагирующий пакет 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 (' спасибо за ваше сообщение ');'с возвратом ();но это явно не путь вперед.

1 Ответ

0 голосов
/ 21 октября 2018

Вот способ, которым вы можете в точности использовать Вспомогательное реагирование: 

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 /

...