Подтвердить что ты не робот

Uncaught TypeError: Не удается прочитать свойство 'state' of null в реакции

Я пытаюсь внедрить простую страницу регистрации в ответ. Однако, когда я пытаюсь отправить форму, я получаю signup.js:53 Uncaught TypeError: Cannot read property 'state' of null

Видимо, реакция неправильно устанавливает состояние. Вот код из компонента "Регистрация":

import React, {Component} из 'response';

export default class Signup extends Component {

  constructor(props) {
    super(props)
    this.state = {
        username: "",
        password1: "",
        password2: "",
        error: ""
      }
    this.onChange = this.onChange.bind(this);
  }

  onChange(e) {
    this.setState({[e.target.name]: e.target.value})
  }

  handleSubmit(e) {
    e.preventDefault()
    console.log(e)
    var username = this.state.username.trim()
    var password1 = this.state.password1.trim()
    var password2 = this.state.password2.trim()

    if (!username || !password1 || !password2) 
      return
    else if (password2 !== password1)
      this.setState({
        error: "Passwords didn't match",
        username: "",
        password1: "",
        password2: ""
        })
  }
  render() {
    return (
      <div>
        <form className="signupForm" onSubmit={this.handleSubmit}>
          <input
            type="text"
            name="username"
            placeholder="Username"
            value={this.state.username}
            onChange={this.onChange} />
          <input
            type="text"
            name="password1"
            placeholder="Password"
            value={this.state.password1}
            onChange={this.onChange} />
          <input
            type="text"
            name="password2"
            placeholder="Password again"
            value={this.state.password2}
            onChange={this.onChange} />
          <input type="submit" value="Post" />
        </form>
        <div value={this.state.error}></div>
      </div>
      )
  }
}
4b9b3361

Ответ 1

Вы должны установить this для handleSubmit, как и для onChange

constructor(props) {
  super(props)
  this.state = {
    username: "",
    password1: "",
    password2: "",
    error: ""
  }
  this.onChange = this.onChange.bind(this);
  this.handleSubmit = this.handleSubmit.bind(this);
}