REACT_react如何实现登陆注册

我会带着你远行 2023-02-28 05:38 88阅读 0赞

登陆：

<!DOCTYPE html>
    <html>
    <head>
    <meta charset="UTF-8" />
    <title>Hello React!</title>
    <script src="https://cdn.staticfile.org/react/16.4.0/umd/react.development.js"></script>
    <script src="https://cdn.staticfile.org/react-dom/16.4.0/umd/react-dom.development.js"></script>
    <script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>
    </head>
    <body>
     
    <div id="app">
    	
    </div>
    </body>
    </html>
    <script type="text/babel"> window.onload = function (){ //组件 class Tab extends React.Component{ constructor(){ super(); this.state = { name:'', password:'', phone:'', male:'man', address:'北京', error:'', } } handleChange(e){ var { value,name} = e.target; var filter = new RegExp(e.target.getAttribute('filter')); var error = ''; if(value == ''){ error = '请输入信息' }else if(!filter.test(value)){ error = '输入格式错误' }else{ error = '' } this.setState({ [name]:value, [name+'Error']:error, //没有则创建一个 }) } handleChange2(e){ var { value,name} = e.target; this.setState({ [name]:value }) } submit(){ var { name,password,phone,male,address} = this.state; var data={ name:name, password:password, phone:phone, male:male, address:address } alert(JSON.stringify(data)) } render(){ var { name,password,phone,male,address,nameError,passwordError,phoneError} = this.state; var arr = ['北京','广东','上海'] return ( <div> <div> <label>姓名：</label> <input type="text" value={ name} name="name" filter="^[\u4E00-\u9FA5]{2,4}$" onChange={ (event)=>this.handleChange(event)} /> <span>{ nameError}</span> </div> <div> <label>密码：</label> <input type="text" value={ password} name="password" filter="^[a-zA-Z0-9]\w{5,17}$" onChange={ (event)=>this.handleChange(event)} /> <span>{ passwordError}</span> </div> <div> <label>手机号：</label> <input type="text" value={ phone} name="phone" filter="^(13[0-9]|14[5|8])\d{8}$" onChange={ (event)=>this.handleChange(event)} /> <span>{ phoneError}</span> </div> <div> <input type="radio" name='male' checked={ male == 'man'?true:false} value="man" onChange={ (event)=>this.handleChange2(event)} />男 <input type="radio" name='male' checked={ male == 'woman'?true:false} value="woman" onChange={ (event)=>this.handleChange2(event)} />女 </div> <div> <select value={ address} name="address" onChange={ (event)=>this.handleChange2(event)}> { arr.map(function(item,index){ return <option key={ index}>{ item}</option> }) } </select> </div> <div> <button disabled={ !name||!password||!phone||nameError||passwordError||phoneError} onClick={ ()=>this.submit()}>提交</button> </div> </div> ) } } ReactDOM.render( <Tab/>, document.getElementById('app')) } </script>