Как в React записать данные из формы?

Есть компонент Формы с данным кодом:

import React, { Component } from 'react'

export default class FormClinet extends Component {
 constructor() {
   super();
   this.state = {
     input: {},
     errors: {}
   };

   this.handleChange = this.handleChange.bind(this);
   this.handleSubmit = this.handleSubmit.bind(this);
 }

 handleChange(event) {
   let input = this.state.input;
   input[event.target.name] = event.target.value;

   this.setState({
     input
   });
 }

 handleSubmit(event) {
   event.preventDefault();

   if (this.validate()) {
     console.log(this.state);

     let input = {};
     input["name"] = "";
     input["email"] = "";
     input["comment"] = "";
     this.setState({ input: input });

     alert('Данные отправлены');
   }
 }

 validate() {
   let input = this.state.input;
   let errors = {};
   let isValid = true;

   if (!input["name"]) {
     isValid = false;
     errors["name"] = "Пожалуйста, введите Ваше имя.";
   }

   if (!input["email"]) {
     isValid = false;
     errors["email"] = "Пожалуйста, введите Ваш адрес электронной почты.";
   }

   if (typeof input["email"] !== "undefined") {

     var pattern = new RegExp(/^(("[\w-\s]+")|([\w-]+(?:\.[\w-]+)*)|("[\w-\s]+")([\w-]+(?:\.[\w-]+)*))(@((?:[\w-]+\.)*\w[\w-]{0,66})\.([a-z]{2,6}(?:\.[a-z]{2})?)$)|(@\[?((25[0-5]\.|2[0-4][0-9]\.|1[0-9]{2}\.|[0-9]{1,2}\.))((25[0-5]|2[0-4][0-9]|1[0-9]{2}|[0-9]{1,2})\.){2}(25[0-5]|2[0-4][0-9]|1[0-9]{2}|[0-9]{1,2})\]?$)/i);
     if (!pattern.test(input["email"])) {
       isValid = false;
       errors["email"] = "Пожалуйста введите верный адрес электронной почты.";
     }
   }

   if (!input["comment"]) {
     isValid = false;
     errors["comment"] = "Пожалуйста, введите сообщение";
   }

   this.setState({
     errors: errors
   });

   return isValid;
 }
 render() {
   return (
     <div>
       <form onSubmit={this.handleSubmit}>

         <div class="form-group">
           <label for="name">Имя:</label>
           <input
             type="text"
             name="name"
             value={this.state.input.name}
             onChange={this.handleChange}
             class="form-control"
             placeholder="Введите имя"
             id="name" />

           <div className="text-danger">{this.state.errors.name}</div>
         </div>

         <div class="form-group">
           <label for="email">Email:</label>
           <input
             type="text"
             name="email"
             value={this.state.input.email}
             onChange={this.handleChange}
             class="form-control"
             placeholder="Введите email"
             id="email" />

           <div className="text-danger">{this.state.errors.email}</div>
         </div>

         <div class="form-group">
           <label for="comment">Сообщение:</label>
           <textarea
             name="comment"
             value={this.state.input.comment}
             onChange={this.handleChange}
             placeholder="Сообщение"
             class="form-control" />

           <div className="text-danger">{this.state.errors.comment}</div>
         </div>

         <input type="submit" value="Отправить" class="btn btn-success" />
       </form>
     </div>
   )
 }
}

Хотелось бы записывать данные из формы после каждой спешной валидации формы.


Ответы (0 шт):