Question

我是reactorJS的新手，只是想开发一个简单的登录示例。在我的示例中，按钮单击页面未使用新组件更新。单击“提交”按钮时，无论用户凭据如何，都应更新页面。

    var UserAuthentication = React.createClass({
        getInitialState: function() {
            return {signIn: false};
        },
        handleSubmit: function() {
            this.state.signIn = true;
        },
      render: function() {
        return (
         <div>
          {(this.state.signIn
             ? <User />     
             :<form>
              <div className="userNameIn">
                <label>Username :</label>
                   <input type="text" ref="userName"/>
                   </div>
                   <div className="userPasswordIn">
                    <label>Password :</label>
                    <input type="password" ref="userPassword"/>
                    </div>
                    <div>
                    <button type="submit" onClick= this.handleSubmit}>Sign in</button>
                    </div>
               </form>
                )}
                </div>
        );
      }
    });

var User = React.createClass({
  render: function() {
    return (
      <div className="userName">
        <label>User in...</label>
      </div>
    );
  }
});

Answer 1

首先，更好的做法是将处理程序放在提交按钮的单击操作上，而不是放在表单本身上 - 通过传递onSubmit prop。这样，它不仅可以通过按下按钮来触发，还可以通过在表单字段上按Enter键来触发。

<form onSubmit = { this.handleSubmit }>
 {...}
</form>

其次，只需将状态对象设置为您想要的状态 - React不会以这种方式工作，只会忽略此语句。你必须使用setState函数，如下所示：

handleSubmit: function() {
   this.setState({ signIn: true });
}

ReactJS：登录后的页面更新

1 个答案: