撰写按钮在文件中不起作用，我在邮件切片中有文件，用于打开弹出窗口进行撰写

Question

我正在使用 redux 创建数据层，下面给出了逻辑，因为我的代码是，但是撰写按钮无法正常工作，它应该打开一个弹出窗口来撰写邮件。 我已经导入了所有必要的图标并导入了所有按钮，我使用 redux 表格进行数据输入，firebase 用于实时数据库，MailSlice 文件写得很好，但如果需要，会发送它。

Sidebar File

import React from 'react';
import './Sidebar.css';
import {Button, IconButton} from "@mui/material";
import AddIcon from '@mui/icons-material/Add';
import InboxIcon from '@mui/icons-material/Inbox';
import SidebarOption from './SidebarOption';
import StarIcon from '@mui/icons-material/Star';
import AccessTimeIcon from '@mui/icons-material/AccessTime';
import LabelImportantIcon from '@mui/icons-material/LabelImportant';
import NearMeIcon from '@mui/icons-material/NearMe';
import NoteIcon from '@mui/icons-material/Note';
import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
import PersonIcon from '@mui/icons-material/Person';
import DuoIcon from '@mui/icons-material/Duo';
import PhoneIcon from '@mui/icons-material/Phone';
import { useDispatch } from 'react-redux';
import { openSendMessage } from './features/mailSlice';


function Sidebar() {

    const dispatch = useDispatch();

    return (
    <div className="sidebar">
        <Button 
        startIcon={<AddIcon fontSize= "large" />} 
        className="sidebar__compose"
        onClick={() => dispatch(openSendMessage())}
        >
            Compose
        </Button>

        <SidebarOption Icon={InboxIcon} title = "Inbox" number={54} selected = {true}/>    
        <SidebarOption Icon={StarIcon} title = "Starred" number={14} />    
        <SidebarOption Icon={AccessTimeIcon} title = "Snoozed" number={24} />    
        <SidebarOption Icon={LabelImportantIcon} title = "Important" number={34} />    
        <SidebarOption Icon={NearMeIcon} title = "Sent" number={21}  />    
        <SidebarOption Icon={NoteIcon} title = "Drafts" number={4} />    
        <SidebarOption Icon={ExpandMoreIcon} title = "More" number={39}/>

        <div className='sidebar__footer'>
            <div className='sidebar__footerIcons'>
                <IconButton>
                    <PersonIcon/>
                </IconButton>
                <IconButton>
                    <DuoIcon/>
                </IconButton>
                <IconButton>
                    <PhoneIcon/>
                </IconButton>
            </div>    
        </div>    
    </div>
    );
}

export default Sidebar;




















SendMail File

import { Button } from '@mui/material';
import React from 'react'
import "./SendMail.css";
import CloseIcon from '@mui/icons-material/Close';
import {useForm} from "react-hook-form";
import { useDispatch } from 'react-redux';
import { closeSendMessage } from './features/mailSlice';
import {db} from "./Firebase";
import firebase from "firebase/compat/app";
import "firebase/compat/auth";
import "firebase/compat/firestore";


function SendMail() {

    const {register, handleSubmit, watch, errors} = useForm();
    const dispatch = useDispatch();

    const onSubmit = (formData) => {
        console.log(formData);
        db.collection("emails").add({
            to: formData.to,
            subject: formData.subject,
            message: formData.message,
            timestamp: firebase.firestore.FieldValue.serverTimestamp(),
        });
    
    
        dispatch(closeSendMessage());

    };


    return (

    <div className='sendMail'>
        <div className='sendMail__header'>
            <h3>New Message</h3>
            <CloseIcon onClick={() => dispatch(closeSendMessage())} className='sendMail__close'/>
        </div>

        <form onSubmit={handleSubmit(onSubmit)}>
            
            <input name='to' 
                placeholder='To:' 
                type="email" 
                ref={register ({required: true})}
                />
            
            {errors.to && (<p className='sendMail__error'>Required field</p>)}

            <input name='subject' 
                placeholder='Subject' 
                type="text" 
                ref={register ({required: true})}
                />

            {errors.subject && (<p className='sendMail__error'>Required field</p>)}
            
            <input name='message' 
                placeholder='Message...' 
                type="text"
                className='sendMail__message'
                ref={register ({required: true})}
            />

            {errors.message && (<p className='sendMail__error'>Required field</p>)}
            
            <div className='sendMail__options'>
                <Button className='sendMail__send'
                        variant='contained'
                        color='primary'
                        type='submit'
                >
                    Send
                </Button>
            </div>
        </form>
    </div>
    )
}

export default SendMail;