Liondancer
Liondancer

Reputation: 16469

reactjs onChange firing callbacks

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

Answers (1)

Jim Skerritt
Jim Skerritt

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

Related Questions