react 案例的实现

先看一下如下效果

效果

这是一个 简单的 效果 左边是用户名进行登录 右边是一个答题还有遮罩

 相信大家还有刚刚创建好的 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>

你学废了吗？  下期开始进行 路由的讲解