未捕获的TypeError：无法在react中读取null的属性'state'

Question

我正在尝试在反应中实现一个简单的注册页面。但是，当我尝试提交表单时，我会收到signup.js:53 Uncaught TypeError: Cannot read property 'state' of null

显然反应没有正确设置状态。以下是注册组件的代码：

从'react'导入React，{Component};

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>
      )
  }
}

Answer 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);
}