web前端入门到实战：做一个电影院选座功能

最新推荐文章于 2024-08-18 16:24:43 发布

魔方编程

最新推荐文章于 2024-08-18 16:24:43 发布

阅读量5.8k

点赞数 1

文章标签： html css JavaScript 前端 web前端

本文链接：https://blog.csdn.net/wewfdf/article/details/102761545

版权

本文通过create-react-app创建项目，利用react-router-dom实现单页面路由。主要介绍在App.js中设置入口，Details.jsx作为首页，包含头部、中间canvas区域和底部选座显示。中间部分的SeatSelector.jsx是关键，详细讲解了canvas的实现，Footer.jsx展示选座信息。

摘要由CSDN通过智能技术生成

项目采用create-react-app脚手架，就是做了一个效果所以只有一个页面但是也用了react-router-dom路由把details作为path=’/'首页了。

一、App.js

import React from 'react';
import {BrowserRouter,Route} from 'react-router-dom'

import Details from './routes/Details'

function App() {
  return (
    <div className="App">
      <BrowserRouter>
        <Route path='/' component={Details}></Route>
      </BrowserRouter>
    </div>
  );
}

export default App;
web前端开发学习Q-q-u-n： 767273102 ，分享学习的方法和需要注意的小细节，不停更新最新的教程和学习方法（详细的前端项目实战教学视频）

这是入口文件的代码内容

二、Details.jsx

import React,{Component} from 'react';
import './Details.css';
import Footer from './Footer';
import SeatSelector from './SeatSelector'
class Details extends Component {

      state = {
            selectSeat:[]
      }
      addSeat = (seat)=>{
            this.setState(prevState=>({
                  selectSeat:[...prevState.selectSeat,seat]
            }))
      }
      removeSeat = (id)=>{
            this.setState({
                selectSeat:this.state.selectSeat.filter(seat=>seat.id !== id)
            })