React用户登录界面

效果图如下：

1.首先把需要bind的事件保存在一个数组里面，这样不需要每次都要绑定

const eventsArr = [
    //按钮点击事件
    "onSignIn",
    //user name输入改变
    "onChangeName",
    //password输入改变
    "onChangePwd"
];

2.SignIn类的构造方法

constructor(props) {
        super(props);
        //一次性绑定所有事件，这样以后添加的事件只要添加到eventArr数组里面就好了
        eventsArr.map((ev) => {
            this[ev] = this[ev].bind(this);
            return "";
        });

        this.state = {
            name: '',
            pwd: '',
            errorMsg:''
        };
    }

3.Sign In按钮点击事件，可以判断是否是有效用户，有效用户跳转到下一个页面，否则提示错误信息