反应未找到事件答案

【问题标题】：React not finding events反应未找到事件
【发布时间】：2015-10-07 20:21:24
【问题描述】：

我正在实现一个非常简单的 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}/>
    }
}

});

正如预期的那样，Login 组件显示并呈现以下内容：

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 钩子获取更改。如果用户点击“注册”，则调用以下代码：

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

调用Account类中的update方法，更新状态并导致重新渲染。这就是导致它切换到 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 的哪一部分才导致这种情况发生？

完整课程

登录组件

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

【问题讨论】：

切换注册后可以切换回登录吗？如果您在注册时更改了用户名，当您再次登录时它不会更改吗？
不，没有事件被触发，任何地方都没有任何变化。我无法切换回来，因为我无法将事件附加到注册视图中的任何内容。
如果您更改 Account 的初始状态，改为首先显示注册表单怎么办？还是没有活动？
如果它是第一个显示的事件，它会完美运行。我相信这与重新渲染过程不绑定事件有关？
您能否创建一个jsfiddle.net 来重现该问题？我看不到任何明显的错误，而且您没有发布实际呈现组件的代码。

标签： javascript reactjs

【解决方案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')
);

【讨论】：

以与您非常相似的方式解决了这个问题。去掉所有的废话，回到第一原则。做得好。 +150！

【解决方案2】：

我没有看到任何明显的东西，但您可以尝试这种模式来显示/隐藏组件。 Toggle showing and hiding components in ReactJs.

【讨论】：

尝试过并观察到相同的行为。第一个组件有事件；第二个没有。
虽然这在理论上可以回答问题，it would be preferable 在此处包含答案的基本部分，并提供链接以供参考。

【解决方案3】：

首先，让您的生活更轻松，不要使用以下指标：

{
    showSignUp: true,
    showLogin: false
}

这样的事情会更简单，并且会产生更少的错误：

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

我想说，如果您以这种方式开始编码，问题将通过“干净的代码魔法”解决））

【讨论】：