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>

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

相关推荐
东华帝君5 分钟前
react 虚拟滚动列表的实现 —— 动态高度
前端
CptW7 分钟前
手撕 Promise 一文搞定
前端·面试
温宇飞7 分钟前
Web 异步编程
前端
腹黑天蝎座8 分钟前
浅谈React19的破坏性更新
前端·react.js
东华帝君8 分钟前
react组件常见的性能优化
前端
第七种黄昏8 分钟前
【前端高频面试题】深入浏览器渲染原理:从输入 URL 到页面绘制的完整流程解析
前端·面试·职场和发展
angelQ8 分钟前
前端fetch手动解析SSE消息体,字符串双引号去除不掉的问题定位
前端·javascript
Huangyi8 分钟前
第一节:Flow的基础知识
android·前端·kotlin
林希_Rachel_傻希希9 分钟前
JavaScript 解构赋值详解,一文通其意。
前端·javascript
Yeats_Liao10 分钟前
Go Web 编程快速入门 02 - 认识 net/http 与 Handler 接口
前端·http·golang