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

项目采用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({
                selectSeat:this.state.selectSeat.filter(seat=>seat.id !== id)
            })
      }
    render() {
        const {selectSeat} = this.state;
        return (
            <div>