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>

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

react 案例的实现

1 完成 整体页面的布局

左边效果

代码的简化

1 完成整体页面的布局