先看一下如下效果
效果
这是一个 简单的 效果 左边是用户名进行登录 右边是一个答题还有遮罩
相信大家还有刚刚创建好的 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>你学废了吗？ 下期开始进行 路由的讲解