Реакция: это значение null в обработчике событий

Question

У меня есть компонент LoginForm. Я хочу проверить перед отправкой, что установлены как loginName, так и password. Я пытался с этим кодом (много вещей опущен):

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; 

однако я получить TypeError в обработчик событий, говоря, что this является недействительным.

Что мне делать?

Answer 1

Вам необходимо установить this для submit метода, потому что теперь this является undefined, для этой операции вы можете использовать .bind

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

Example

или вы можете использовать arrow function

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

Example

Answer 2

Реагент был обязательным для этого обратным вызовом для вас раньше. Но теперь она ушла, и вы должны связать его самостоятельно или сделать обертку, как

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

Answer 3

Для тех, кто использует Бабель, вы можете использовать bind operator с transform-function-bind плагиным:

onSubmit={::this.submit} 

, которая является синтаксической сахар для:

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