Midiparse Midiparse - 2 months ago 10
React JSX Question

React: this is null in event handler

I'm newbie to React.

I have a LoginForm component. I want to check before submit, that both

loginName
and
password
is set. I tried with this code (a lot of stuff omitted):

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;


however, i get a
TypeError
in the event handler, saying that
this
is null.

What should I be doing?

Answer

You need set this for submit method because now this is undefined, for this operation you can use .bind

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

Example

or you can use arrow function

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

Example