Почему onSubmit не работает с синтаксисом React ES6? - PullRequest
Новая
       112

Почему onSubmit не работает с синтаксисом React ES6?

0 голосов
/ 09 июля 2020

Я новичок ie в мире React. Собственно, я сталкиваюсь с ситуацией. Когда я использую современный синтаксис, я ничего не добиваюсь. Но с bind.this все работает без сбоев. Ниже мой код. Не могли бы вы выявить ошибки. Выдает ошибку типа «не могу найти состояние неопределенного». Спасибо. 

import React, { Component } from 'react';

class Login extends Component {
    state = {
            email: '',
            password: '',
    }

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

    signin(e) {
        e.preventDefault();
        const { email, password } = this.state;

        if (email === 'xyz@gmail.com'  && password === '123456') {
            console.log('logged in')
        } 
    }  

    render() {
        return(
            <div className='login'>
          <div className='login-div'>
          <form
            onSubmit={this.signin}>
            <fieldset>
              <h2 className='heading'>Sign into your account</h2>
              <label htmlFor="email">
                <input
                  type="email"
                  name="email"
                  placeholder="email"
                  value={this.state.email}
                  onChange={this.handleChange}
                />
              </label>
              <label htmlFor="password">
                <input
                  type="password"
                  name="password"
                  placeholder="password"
                  value={this.state.password}
                  onChange={this.handleChange}
                />
              </label>

              <button type="submit">Sign In!</button>
            </fieldset>
          </form>
          </div>
          </div>
        )
    }
}

export default Login;

Ответы [ 2 ]

3 голосов
/ 09 июля 2020

можете ли вы изменить свою функцию на эту 

signin = (e) => {
        e.preventDefault();
        const { email, password } = this.state;

        if (email === 'xyz@gmail.com'  && password === '123456') {
            console.log('logged in')
        } 
    }
0 голосов
/ 09 июля 2020

Просто чтобы объяснить, что происходит: это потому, что внутри функции signin this относится к контексту выполнения (обработчику событий), но не к вашему компоненту React.

Вы можете указать, какой this функция signin будет связана с использованием метода bind. Добавьте эту строку в начало класса: 

this.signin = this.signin.bind(this);

Примечание: вы можете избежать привязки всех ваших функций, написав их с использованием синтаксиса стрелочной функции.

...