Loại không bắt buộcLỗi: Không thể đọc thuộc tính 'trạng thái' của null theo phản ứng

Question

Tôi đang cố gắng triển khai trang đăng ký đơn giản trong phản ứng. Tuy nhiên, khi tôi cố gắng gửi biểu mẫu, tôi nhận được signup.js:53 Uncaught TypeError: Cannot read property 'state' of null

Phản ứng dường như không được đặt đúng trạng thái. Đây là mã từ thành phần Đăng ký:

nhập Phản hồi, {Thành phần} từ 'phản ứng';

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

Bạn nên đặt this cho handleSubmit như bạn đã làm cho onChange

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