Tepki: olay işleyicisinde boş Bu ileti

Question

Girişim bileşenim var. Göndermeden önce kontrol etmek istiyorum, hem loginName hem de password ayarlandı. this boş olduğunu söyleyerek,

class LoginForm extends Component { 

    constructor() { 
    super(); 

    this.state = { 
     error: "", 

     loginName: "", 
     password: "", 
     remember: true 
    }; 
    } 


    submit(e) { 
    e.preventDefault(); 
    if(!this.state.loginName || !this.state.password) { //this is null 
     this.setState({ error: "Fill in both fields" }); 
    } else { 
     console.log("submitting form"); 
    } 
    } 

    render() { 
    return (
     <div className="col-xs-12 col-sm-6 col-md-4"> 
     <form className="login" onSubmit={this.submit}> 
      <button type="submit" className="btn btn-default">Sign in</button> 
     </form> 
     </div> 
    ); 
    } 
} 

export default LoginForm; 

ancak ben olay işleyicisi bir TypeError olsun: Bu kod (atlanmış bir sürü şey) ile çalıştı.

Ne yapmalıyım?

Answer 1

Sen .bind

onSubmit={ this.submit.bind(this) } 

Example

kullanabilir veya arrow function

onSubmit={ (e) => this.submit(e) } 

Example kullanabilirsiniz bu işlem için geç this, undefined çünkü submit yöntemi için this ayarlamak gerek

Answer 2

Tepki, daha önce sizin için geri aramaları bağlayıcıyordu. Ama şimdi gitti, ve sen, sen transform-function-bind eklenti ile bind operator kullanabilirsiniz Babel kullanıyor olanlar için

onSubmit={() => this.submit()} 

Answer 3

gibi sarmalayıcı kendiniz bağlamak veya yapmak zorunda: Bir sözdizimsel olan

onSubmit={::this.submit} 

şeker için:

onSubmit={this.submit.bind(this)}