Как я могу получить данные формы при отправке?

Как я могу получить данные формы при отправке?

    import React, { Component }           from 'react';
import Axios                          from 'axios';

class Register extends Component {
    submitHandler = (event) => {
        event.preventDefault();
        var url = '';
        var data = {
            returnSecureToken:true,
            email:this.email,
            password:this.password
        }
        Axios.post(url,data)
            .then(response => {
                console.log(response);
            })
            .catch(err =>{
                console.log(err);
            })

    }
    render() {
        var listClasses = "";
        return(
            <div>
                <h1>Registrati</h1>
                <form onSubmit={this.submitHandler}>
                    <input type="password" className={listClasses} value={this.props.value} placeholder="password" name="password"/>
                    <input type="email" className={listClasses} value={this.props.value} placeholder="email" name="email"/>
                    <input type="submit" value="submit"/>
                </form>
            </div>
        );
    }
}
export default Register;

Я хочу отправить свои данные по почте. Я попытался найти свой объект это, но после отправки не вижу свои данные.

Лучшим подходом было бы использовать React dom refs для каждого ввода формы. css-tricks.com/react-forms-using-refs. Кстати, в вашем примере вы используете одно и то же значение для пароля и электронной почты.

givehug 13.09.2018 21:34

прикрепите обработчик событий для событий onchange во входных данных, который предоставит вам значение через event.target.value, которое будет передано обработчику событий. reactjs.org/docs/forms.html

oosniss 13.09.2018 21:35

@oosniss Нет причин создавать три обработчика событий и нет причин наблюдать за их изменением, если вы заботитесь только об их значении при отправке формы.

Abid Hasan 13.09.2018 21:37

Вы пробовали смотреть какие-нибудь уроки YouTube? Есть бесчисленное множество только того, о чем вы спрашиваете.

vsync 13.09.2018 21:40

@AbidHasan Я думаю, что одним из основных клиентов React является то, что DOM не является слоем хранилища; вы не читать DOM, вы синхронизировать DOM, чтобы соответствовать состоянию вашего приложения. Чтобы получить их значение только при отправке формы, вам нужно всего лишь это: читать из DOM, как если бы это был источник истины.

Kyeotic 13.09.2018 21:42

@Tyrsius Я признаю, что всегда готов узнавать что-то новое, и я понимаю, что DOM - это не уровень хранения. Возможно, я больше имел в виду использование обработчика событий onBlur? Это был бы лучший вариант? Это предпочтительнее, чем делать ref для каждого входа и читать их?

Abid Hasan 13.09.2018 21:44

Используйте управляющие входы. В вашем коде каково значение this.emailthis.password?

sultan aslam 14.09.2018 15:36
0
7
83
1

Ответы 1

Лучший способ сделать это - сделать компонент неконтролируемым компонентом и подключить обработчики событий изменения для каждого поля.

Было бы лучше, чем использовать refs, нарушающий инкапсуляцию.

import React, { Component } from 'react';
import Axios from 'axios';

class Register extends Component {
  state = {
    emailAddress: '',
    password: ''
  }
  submitHandler = (event) => {
    const {
      emailAddress,
      password
    } = this.state;

    event.preventDefault();
    var url = '';
    var data = {
      returnSecureToken: true,
      email: emailAddress,
      password: password
    }
    Axios.post(url, data)
      .then(response => {
        console.log(response);
      })
      .catch(err => {
        console.log(err);
      })

  }

  handlePasswordChange = (event) => {
    this.setState({ password: event.target.value });
  }

  handleEmailChange = (event) => {
    this.setState({ emailAddress: event.target.value });
  }

  render() {
    var listClasses = "";
    return (
      <div>
        <h1>Registrati</h1>
        <form onSubmit={this.submitHandler}>
          <input onchange={this.handlePasswordChange} type="password" className={listClasses} value={this.props.value} placeholder="password" name="password" />
          <input onchange={this.handleEmailChange} type="email" className={listClasses} value={this.props.value} placeholder="email" name="email" />
          <input type="submit" value="submit" />
        </form>
      </div>
    );
  }
}
export default Register;

Другие вопросы по теме