Reputation: 16469
I am trying to create a password confirmation checker in reactJS
. I am currently testing out firing the callbacks within the component. When I test this view, I dont see my onChange
firing off any callbacks. I am pretty new to reactjs
so I'm not sure why nothing is happening.
import React from 'react';
class SignUp extends React.Component {
confirmPassword(event) {
console.log("confirmPassword");
console.log(event);
}
setInitialPassword(event) {
console.log("setInitialPassword");
console.log(event);
}
render() {
return (
<div>
<form method="post" action="/signup">
<ul>
<li><input id="firstName" name="first_name" placeholder="First name" type="text" required="required" /></li>
<li><input id="lastName" name="last_name" placeholder="Last name" type="text" required="required" /></li>
<li><input id="email" name="email" placeholder="Email" type="email" required="required" /></li>
<li><input id="password" name="password" placeholder="Password" type="password" required="required" onChange={ this.setInitialPassword }/></li>
<li><input id="confirmPassword" name="confirm_password" placeholder="Confirm Password" type="password" required="required" onChange={ this.confirmPassword } /></li>
<span id="confirmMessage" class="confirm-message"></span>
<input type="submit" value="Sign up" />
<input type="reset" value="Cancel" />
</ul>
</form>
</div>
);
}
};
export default SignUp;
Upvotes: 0
Views: 106
Reputation: 4596
You need to bind this
when you set your handlers.
<li><input id="password" name="password" placeholder="Password" type="password" required="required" onChange={ this.setInitialPassword.bind(this) }/></li>
<li><input id="confirmPassword" name="confirm_password" placeholder="Confirm Password" type="password" required="required" onChange={ this.confirmPassword.bind(this) } /></li>
or using ES6 big arrow functions:
<li><input id="password" name="password" placeholder="Password" type="password" required="required" onChange={ e => this.setInitialPassword(e) }/></li>
<li><input id="confirmPassword" name="confirm_password" placeholder="Confirm Password" type="password" required="required" onChange={ e => this.confirmPassword(e) } /></li>
Upvotes: 1