参数'event'和'event'的类型不兼容

Question

我有一个项目，是一个员工监控项目，它有几个组件，其中有一组按钮。

我有一组按钮，我在另一个组件中调用这些按钮，但是当我编写代码时，我遇到了这个错误。

Type '(event: React.MouseEvent<Document, MouseEvent>) => void' is not assignable to type '(event: 
   MouseEvent | TouchEvent) => void'.
  Types of parameters 'event' and 'event' are incompatible.
    Type 'MouseEvent | TouchEvent' is not assignable to type 'MouseEvent<Document, MouseEvent>'.
      Type 'MouseEvent' is missing the following properties from type 'MouseEvent<Document, 
      MouseEvent>': nativeEvent, isDefaultPrevented, isPropagationStopped, persi
           st 

我该如何解决？

这个文件有按钮的设计并赋予它们自己的风格

当我激活这个文件时，它给了我上面的错误。

const options = ['Member', 'Admin'];

export default function SplitButton() {
    const [open, setOpen] = React.useState(false);
    const anchorRef = React.useRef<HTMLDivElement>(null);
    const [selectedIndex, setSelectedIndex] = React.useState(1);

    const handleClick = () => {
        console.info(`You clicked ${options[selectedIndex]}`);
    };

    const handleMenuItemClick = (
        event: React.MouseEvent<HTMLLIElement, MouseEvent>,
        index: number,
    ) => {
        setSelectedIndex(index);
        setOpen(false);
    };

    const handleToggle = () => {
        setOpen((prevOpen) => !prevOpen);
    };

    const handleClose = (event: React.MouseEvent<Document, MouseEvent>) => {
        if (anchorRef.current && anchorRef.current.contains(event.target as HTMLElement)) {
            return;
        }

        setOpen(false);
    };

    // @ts-ignore
    return (
        <Grid container direction="column" alignItems="center">
            <Grid item xs={12}>
                <ButtonGroup variant="contained" color="primary" ref={anchorRef} aria-label="split 
                    button">
                    <Button onClick={handleClick}>{options[selectedIndex]}</Button>
                    <Button
                        color="primary"
                        size="small"
                        aria-controls={open ? 'split-button-menu' : undefined}
                        aria-expanded={open ? 'true' : undefined}
                        aria-label="select merge strategy"
                        aria-haspopup="menu"
                        onClick={handleToggle}
                    >
                        <ArrowDropDownIcon />
                    </Button>
                </ButtonGroup>
                <Popper open={open} anchorEl={anchorRef.current} role={undefined} transition 
                   disablePortal>
                    {({ TransitionProps, placement }) => (
                        <Grow
                            {...TransitionProps}
                            style={{
                                transformOrigin: placement === 'bottom' ? 'center top' : 'center 
                       bottom',
                            }}
                        >
                            <Paper>
                                <ClickAwayListener onClickAway={handleClose}>
                                    <MenuList id="split-button-menu">
                                        {options.map((option, index) => (
                                            <MenuItem
                                                key={option}
                                                disabled={index === 2}
                                                selected={index === selectedIndex}
                                                onClick={(event) => handleMenuItemClick(event, 
                                           index)}
                                            >
                                                {option}
                                            </MenuItem>
                                        ))}
                                    </MenuList>
                                </ClickAwayListener>
                            </Paper>
                        </Grow>
                    )}
                </Popper>
            </Grid>
        </Grid>
    );
}

Answer 1

尝试将您的 handleClose 方法更改为：

const handleClose = (event: MouseEvent | TouchEvent) => {
    if (anchorRef.current && anchorRef.current.contains(event.target as HTMLElement)) {
        return;
    }

    setOpen(false);
};

为什么？

错误消息表明您的handleClose 方法与ClickAwayListener 可以接受的onClickAway 回调输入不兼容。

目前，您的handleClose 有签名

(React.MouseEvent<Document, MouseEvent>) => void

而 ClickAwayListener 的 onClickAway 所期望的是

(MouseEvent | TouchEvent) => void 

Answer 2

试试这个

event:(MouseEvent | TouchEvent) => void