首先配置主index页面
import React from 'react';import ReactDOM from 'react-dom/client';import App from './App';import { BrowserRouter as Route } from 'react-router-dom'const root = ReactDOM.createRoot(document.getElementById('root'));root.render(<React.StrictMode><Route><App /></Route></React.StrictMode>);
配置路由文件
import React, { Component } from 'react'// import SetTimeout from './SetTimeout'import Login from './login'import Xuyuan from './xuyuan'import { Route, Switch, Redirect } from 'react-router-dom'export default class App extends Component {render() {return (<div><Switch><Route path="/login" component={Login} /><Route path="/xuyuan" component={Xuyuan} /><Redirect from="/" to='/login'></Redirect></Switch>{/* <div className='set'><SetTimeout></SetTimeout></div> */}</div>)}}
登录页代码实现
import React, { Component } from 'react'export default class login extends Component {// constructor(props) {// super(props);state = {name: "",pwd: "",time: 60,isShow: false,};// }//点击发送验证码变成倒计时60syanzheng = () => {//如果用户名为空，点击发送验证码不会倒计时if (this.state.name === '') {alert('请输入手机号')return}let time = 60;let timer = setInterval(() => {time--;if (time <= 0) {clearInterval(timer);this.setState({isShow: false})} else {this.setState({isShow: true,time: time})}}, 1000)}setName(e) {let value = e.target.value;this.setState({name: value})}setPwd(e) {let value = e.target.value;this.setState({pwd: value})}//点击登录判断用户名和密码是否正确deng = () => {if (this.state.name === '' && this.state.pwd === '') {alert('请输入手机号和密码')} else if (this.state.pwd === '') {alert('请输入验证码')} else if (this.state.pwd !== '123456') {alert('验证码错误')} else if (this.state.name === '150' && this.state.pwd === '123456') {this.props.history.push('/xuyuan')}}render() {const { name, pwd } = this.statereturn (<div><lable>手机号</lable><input type='text' placeholder='请输入用户名' value={name} onChange={(e) => { this.setName(e) }}></input><br /><lable>验证码</lable><input type='password' placeholder='请输入验证码' value={pwd} onChange={(e) => { this.setPwd(e) }}></input>{/* 发送验证码 */}<button onClick={this.yanzheng}>{this.state.isShow ? "倒计时" + this.state.time + 's' : '发送验证码'}</button><br /><button onClick={this.deng}>登录</button></div>)}}
许愿墙页面实现
import React, { memo, useState, useRef } from 'react'import Draggable from 'react-draggable';export default memo(function Index() {let [list, setlist] = useState(['bg1.png','bg2.png', 'bg3.png', 'bg4.png'])const [bor, setbor] = useState('')const [shouimg, setshouimg] = useState([])const [id, setid] = useState()const inpuref = useRef()const addlist = () => {if (!id) {const top = Math.random() * (500 + 1);const left = Math.random() * (300 + 1);let obj = { id: new Date(), name: inpuref.current.value, img: bor, top, left }let data = [...shouimg]data.push(obj)setshouimg(data)inpuref.current.value = ' 'setbor('')} else {let data = [...shouimg]console.log(bor, inpuref.current.value);data.forEach(item => {if (item.id === id) {item.name = inpuref.current.valueitem.img = bor}})console.log(data);setid()setshouimg(data)inpuref.current.value = ' 'setbor('')}}const delimg = (item) => {let data = [...shouimg]let obj = data.filter(it => it.name !== item.name)setshouimg(obj)}const Update = (item) => {setbor(item.img)inpuref.current.value = item.namesetid(item.id)}return (<div><div style={{ height: '100px', width: '100%' }}>{list.map(item => {return (<div style={{ float: 'left', padding: '10px' }} key={item}><img src={require('../img/' + item)} style={{ width: '150px', border: bor === item ? '2px solid red' : '' }} onClick={() => {setbor(item)}} /></div>)})}<input type="text" ref={inpuref} /><button onClick={() => {addlist()}}>许愿</button></div><div style={{ position: 'relative', height: '567px' }} className='yd'>{shouimg.map(item => {return (<Draggable bounds='.yd' handle='.tuo' key={item.id} ><div style={{ background: `url(${require('../img/' + item.img)}) no-repeat center`, width: '150px', height: '150px', position: 'absolute', left: item.left, top: item.top, backgroundSize: '100%', }} ><div className='tuo' style={{ height: '20px', width: '40px' }}></div><div style={{ background: 'red', width: '20px', float: 'right', marginTop: '-15px' }} onClick={() => { delimg(item) }}>x</div><span onClick={() => {console.log();Update(item)}}>{item.name}</span></div></Draggable>)})}</div></div>)})
