做一个电影院选座功能-前端

最新推荐文章于 2025-09-25 14:31:57 发布

原创

最新推荐文章于 2025-09-25 14:31:57 发布 · 8.4k 阅读

收录于

当前文章被以下社区和专栏收录：

本文介绍如何利用create-react-app创建一个前端项目，实现电影院选座功能。项目中运用了react-router-dom进行路由配置，将Details组件设为首页。Details组件包含头部、canvas展示区和底部选座信息。关键部分在于SeatSelector组件，它展示了canvas区域的座位选择逻辑。

项目采用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;

这是入口文件的代码内容

二、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

标签