Respond not to event searches

Question

I implement a very simple React login page. I started with the next Account component.

var Account = React.createClass({

getInitialState: function() {
    return {
        showSignUp: false,
        showLogin: true
    }
},

update: function(data) {
    this.setState(data);
},

render: function() {
    if(this.state.showSignUp) {
        return <SignUp/>
    }
    else {
        return <Login update={this.update}/>
    }
}

});

As expected, the Login component is displayed and displays the following:

return (
        <div>
            <p><input type="text" placeholder={Language.languagePack.account.username} onChange={this.usernameChange}/></p>
            <p><input type="password" placeholder={Language.languagePack.account.password} onChange={this.passwordChange}/></p>
            <p><a onClick={this.performLogin}>{Language.languagePack.account.login}</a></p>
            <p><a onClick={this.handleSignUp}>{Language.languagePack.account.signUp}</a></p>
            <p>{failedMessage}</p>
        </div>
    )

All of this works great. The application picks up changes with the onChange hook. If the user clicks the "Register" button, then the following code is called:

handleSignUp: function() {
    this.props.update({showSignUp: true, showLogin: false})
},

Which invokes the update method in the Account class, which updates the state and causes a re-rendering. This is why it switches to the SignUp component.

return (
        <div id="signUp">
            <p><input type="text" placeholder={Language.languagePack.account.username} onChange={this.usernameChange} /></p>
            <p><input type="password" placeholder={Language.languagePack.account.password} onChange={this.passwordChange} /></p>
            <p><input type="email" placeholder={Language.languagePack.account.email} onChange={this.emailChange} /></p>
            <p><a onClick={this.handleSignUp}>{Language.languagePack.account.signUp}</a></p>
        </div>
    )

- . onChange onClick, , . , , . : , ?

var Login = React.createClass({

getInitialState: function() {
    return {
        username: '',
        password: '',
        failed: false
    }
},

usernameChange: function(event) {
    this.setState({
        username: event.target.value,
        failed: false
    });
},

passwordChange: function(event) {
    this.setState({
        password: event.target.value,
        failed: false
    });
},

performLogin: function() {
    var username = this.state.username;
    var password = this.state.password;

    console.log("Attempting login with username " + username + " and password " + password);

    var _this = this;

    Api.login(username, password, function(response) {
        _this.props.update({user: response, loggedIn: true});
    },
    function(response) {
        _this.setState({failed: true});
    })
},

handleSignUp: function() {
    this.props.update({showSignUp: true, showLogin: false})
},

render: function() {
    var failedMessage = null;

    if(this.state.failed) {
        failedMessage = <div className="failed-auth">{Language.languagePack.account.invalidCredentials}</div>;
    }

    return (
        <div>
            <p><input type="text" placeholder={Language.languagePack.account.username} onChange={this.usernameChange}/></p>
            <p><input type="password" placeholder={Language.languagePack.account.password} onChange={this.passwordChange}/></p>
            <p><a onClick={this.performLogin}>{Language.languagePack.account.login}</a></p>
            <p><a onClick={this.handleSignUp}>{Language.languagePack.account.signUp}</a></p>
            <p>{failedMessage}</p>
        </div>
    )
}
});

var SignUp = React.createClass({

getInitialState : function() {
    return {
        username: '',
        password: '',
        email: ''
    }
},

usernameChange: function(event) {
    this.setState({
        username: event.target.value
    });
},

passwordChange: function(event) {
    this.setState({
        password: event.target.value
    });
},

emailChange: function(event) {
    this.setState({
        email: event.target.value
    });
},

handleSignUp : function() {
    var username = this.state.username;
    var password = this.state.password;
    var email = this.state.email;

    console.log("Signing up with username=" + username + " and password=" + password + "and email=" + email);
},

handleLogin : function() {
    console.log("Fired!");
},

render: function () {
    return (
        <div id="signUp">
            <p><input type="text" placeholder={Language.languagePack.account.username} onChange={this.usernameChange} /></p>
            <p><input type="password" placeholder={Language.languagePack.account.password} onChange={this.passwordChange} /></p>
            <p><input type="email" placeholder={Language.languagePack.account.email} onChange={this.emailChange} /></p>
            <p><a onClick={this.handleSignUp}>{Language.languagePack.account.signUp}</a></p>
        </div>
    )
}
});

Answer 1

; language.LanguagePack, , . javascript, .

https://jsfiddle.net/tqz3skcr/2/

var SignUp = React.createClass({

getInitialState : function() {
    return {
        username: '',
        password: '',
        email: ''
    }
},

usernameChange: function(event) {
    console.log('username Changed');
    this.setState({
        username: event.target.value
    });
},

passwordChange: function(event) {
    console.log('password Changed');
    this.setState({
        password: event.target.value
    });
},

emailChange: function(event) {
    console.log('email changed');
    this.setState({
        email: event.target.value
    });
},

handleSignUp : function() {
    var username = this.state.username;
    var password = this.state.password;
    var email = this.state.email;

    console.log("Signing up with username=" + username + " and password=" + password + "and email=" + email);
},

handleLogin : function() {
    console.log("Fired!");
},

render: function () {
    return (
        <div id="signUp">
            <p><input type="text" onChange={this.usernameChange} /></p>
            <p><input type="password" onChange={this.passwordChange} /></p>
            <p><input type="email" onChange={this.emailChange} /></p>
            <p><a onClick={this.handleSignUp}></a></p>
        </div>
    )
}
});

ReactDOM.render(
    <SignUp />,
    document.getElementById('container')
);

Answer 2

, , / . ReactJs.

Answer 3

First of all, make your life easier and do not use indicators such as:

{
    showSignUp: true,
    showLogin: false
}

something like this would be much simpler and cause fewer errors:

{
    formToShow: "signUpForm" // or "loginForm" 
}

I would say that if you start coding this way, the problem will be solved with the help of "pure code magic"))