先看一下如下效果

這是一個 簡單的 效果 左邊是用戶名進行登錄 右邊是一個答題還有遮罩

?相信大家還有剛剛創建好的 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>

你學廢了嗎？? 下期開始進行 路由的講解