javascript - react 没有找到事件

Question

我正在实现一个非常简单的 React 登录页面。我从以下组件开始，帐户。

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}/>
    }
}

});

正如预期的那样，登录组件显示并呈现以下内容:

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>
    )

一切正常。应用程序正在通过 onChange Hook 获取更改。如果用户点击“注册”，则会调用以下代码:

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

它调用 Account 类中的更新方法，更新状态并导致重新渲染。这就是导致它切换到 SignUp 组件的原因。

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 似乎没有注册。我认为这与我基于呈现不同组件的状态变化来切换组件的实现有关。我的问题是，为什么会发生这种情况？我误解了 React 的哪一部分来实现这种情况？

完整类(class)

登录组件

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')
);