React用户登录界面

时间:2024-10-10 18:05:11

效果图如下:

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

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

类的构造方法

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

         = {
            name: '',
            pwd: '',
            errorMsg:''
        };
    }

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