Uncaught TypeError:无法在反应中读取null属性的“状态”

我正在尝试实现一个简单的注册页面反应。 但是,当我尝试提交表单时,我得到了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> ) } } 

你应该像设置onChange一样设置handleSubmit

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