先看一下如下效果
效果
这是一个 简单的 效果 左边是用户名进行登录 右边是一个答题还有遮罩
相信大家还有刚刚创建好的 react 脚手架了，没有的话可以运行以下命令
creact-react-app 项目名称把项目名称四个字 改成 自己想要的一个名字 最好是英文的在 App.js中去书写我们的代码
1 完成 整体页面的布局
可以清晰看到 这就是一个·左右结构的 一个效果 可以考虑弹性 布局 让我们 给整个 dom先来一个父盒子 在 里面 来两个 子盒子 可以先用 颜色 加以区分
render 后 return下代码如下
<div className='box'><div className='left'></div><div className='right'></div></div>在 react中 我们 可以 直接对 css文件进行引入 可以去创建一个css 比如可以叫它 mine.css
在这里定义一些样式
.box {display: flex;height: 100vh;
}.left {flex: 1;background-color: red;
}.right {flex: 2;background-color: blue;
}引入这个 css 大概看到如下 效果
import './mine.css' 
出现说明引入成功 ，可以将 左边的 背景去除 将右边的 改为黑色 先完成左边的内容
左边效果
state 中 添加 username:'' 用于 接收 用户输入的用户名 添加 text 来 用于控制 文字的显示
再来一个 flag来控制 右边的样式
state = {username: '',text:'',flag:false}在 state下面 可以添加change函数
change=(e)=>{console.log(e.target.value)this.setState({username:e.target.value})}再添加一个 登录的函数 login
login=()=>{if(this.state.username==''){alert('请输入用户名')}else{if( this.state.username.length<6 || this.state.username>18 ){this.setState({text:'用户名长度为6-18位'})}else{this.setState({ text:'',flag:true})}}}对其进行绑定
<div className='box'><div className='left'><input onChange={(e)=> this.change(e)} placeholder='请输入用户名' /><span style={{color:'red'}}>{this.state.text}</span><br></br><button onClick={this.login}>登录</button></div><div className={this.state.flag?'right1':'right'}></div></div>main.css中 可以改一下
.right {flex: 2;background-color: rgb(1, 1, 2);
}
.right1 {flex: 2;}在 state中 定义 list 以此渲染 题目
list:[{title:'br标签是干什么的?',select:['实现换行的','显示图片的','制作按钮的','实现分段的'],'answer':0},{title:'img标签是干什么的?',select:['实现换行的','显示图片的','制作按钮的','实现分段的'],'answer':1},{title:'button标签是干什么的?',select:['实现换行的','显示图片的','制作按钮的','实现分段的'],'answer':2}, {title:'p标签是干什么的?',select:['实现换行的','显示图片的','制作按钮的','实现分段的'],'answer':3},]title是题目 select选项 answei为 正确的答案 可以再定义 如下
num:0,wrong:0,right:0,btn:'登录',aswer:-1让我们重新更新一下 login这个函数
login=()=>{if(this.state.btn=='登录'){if(this.state.username==''){alert('请输入用户名')}else{if( this.state.username.length<6 || this.state.username.length>18 ){this.setState({text:'用户名长度为6-18位'})}else{console.log(this.state.flag);this.setState({ text:'',flag:true})this.setState({btn:'退出'})}}}else{this.setState({flag:false})this.setState({btn:'登录'})} }更改一下 按钮的显示 左边的逻辑和样式到此完成
<button onClick={this.login}>{this.state.btn}</button>接下来开始 进行右侧效果
<div className={this.state.flag?'right1':'right'}><h3>{this.state.list[this.state.num].title}</h3>{this.state.list[this.state.num].select.map((item,index)=>{return <div key={index} className='select'><input type='radio' name='select' onChange={()=>{this.setState({answer:index}) }} checked={index==this.state.answer} />{item}</div>})}<button onClick={this.next}>{this.state.num<this.state.list.length-1?'下一题':'重新开始'}</button><br></br>{this.state.num+1}/4 答对{this.state.right} 答错 {this.state.wrong}</div>开始进行 next函数的定义 以此进行题目的切换
next=()=>{if(this.state.num<this.state.list.length-1){if(this.state.answer==-1){alert('请选择答案')}else{ if(this.state.answer==this.state.list[this.state.num].answer){this.setState({right:this.state.right+1})}else{this.setState({wrong:this.state.wrong+1})}this.setState({num:this.state.num+1})}this.setState({answer:-1})}else{this.setState({num:0,wrong:0,right:0})}}到此可以实现效果的实现
代码的简化
有些代码其实是可以简化的 可以进行结构赋值
let {text,flag,list,num,answer,wrong,right,btn,btn1}=this.state最终代码可可以写成这样
<div className='box'><div className='left'><input onChange={(e)=> this.change(e)} placeholder='请输入用户名' /><span style={{color:'red'}}>{text}</span><br></br><button onClick={this.login}>{btn}</button></div><div className={flag?'right1':'right'}><h3>{list[num].title}</h3>{list[num].select.map((item,index)=>{return <div key={index} className='select'><input type='radio' name='select' onChange={()=>{this.setState({answer:index}) }} checked={index==answer} />{item}</div>})}<button onClick={this.next}>{num<list.length-1?'下一题':'重新开始'}</button><br></br>{num+1}/4 答对{right} 答错 {wrong}</div></div>你学废了吗？ 下期开始进行 路由的讲解
-压缩列表)
