类型 'void' 不可分配给类型 '(event: MouseEvent<HTMLDivElement, MouseEvent>) => void'

Question

我怎么了，你能告诉我 2 做什么吗？

我正在创建一个需要挂钩来替换状态的网站。我在我的 index.js 上。错误出现在菜单内 div 内的 onClicks 上。菜单来自material-UI

我的代码：

import Button from '@material-ui/core/Button';
import Menu from '@material-ui/core/Menu';
import MenuItem from '@material-ui/core/MenuItem';

export default function SimpleMenu() {
    const [ anchorEl, setAnchorEl ] = React.useState<null | HTMLElement>(null);
    const [ language, setLanguage ] = useState('English');
    const languages = [ 'English', 'Chinese ( Simplified )', 'Chinese ( Traditional )' ];

    const handleClick = (event: React.MouseEvent<HTMLButtonElement>) => {
        setAnchorEl(event.currentTarget);
    };

    const handleClose = (word: string) => {
        setLanguage(word);
    };

    return (
        <div>
            <Button aria-controls="simple-menu" aria-haspopup="true" onClick={handleClick}>
                Open Menu
            </Button>
            <Menu id="simple-menu" anchorEl={anchorEl} keepMounted open={Boolean(anchorEl)} onClose={handleClose}>
                <div onClick={handleClose(languages[0])}>{languages[0]}</div>
                <div onClick={handleClose(languages[1])}>{languages[1]}</div>
                <div onClick={handleClose(languages[2])}>{languages[2]}</div>
            </Menu>
        </div>
    );
}


----------


error:

```Type 'void' is not assignable to type '(event: MouseEvent<HTMLDivElement, MouseEvent>) => void'.```

can u please help me?

( bottom is gibberish )

Answer 1

嘿希望这能解决您的问题： 首先像这样在你的按钮上写 onClick：

    <Button
      aria-controls="simple-menu"
      aria-haspopup="true"
      onClick={() => handleClick(event as MouseEvent)}
    >
      Open Menu
    </Button>

然后像这样写你的handleClick：

    const handleClick = (event: MouseEvent) => {
    setAnchorEl(event.currentTarget);
};

可能不是最好的解决方案，但我认为它可以解决您的问题:)

Answer 2

把onClick={handleClose(languages[0])}改成这样的箭头函数

onClick={() => handleClose(languages[0])}

或者改变handleClose函数

const handleClose = () => (word: string) => {
    setLanguage(word);
};