如何将功能连接到反应打字稿应用程序中的材料 ui 工具提示？答案

【问题标题】：How do I connect functionality to material ui tooltips in react typescript app?如何将功能连接到反应打字稿应用程序中的材料 ui 工具提示？
【发布时间】：2021-10-18 08:19:12
【问题描述】：

我正在尝试学习使用 react 和 typescript。但是，我真的被困在这里了。

我正在尝试根据按钮获得的点击次数在应用程序中构建一个计数器，这是一个材料 ui 工具提示。我不知道如何将它们结合在一起（用户界面和逻辑）。到目前为止，我的代码如下所示：

import React,{useState} from 'react';
import Tooltip from "@material-ui/core/Tooltip";
export const MyCard = () => {
const classes = useStyles();

return (
    <Card className={classes.root}>
         <Tooltip title={"Like"}>
            <IconButton aria-label="Like Me">
                <FavoriteIcon />
            </IconButton>
        </Tooltip>
    </Card>
);

但是，我不确定如何根据点击次数为点赞按钮构建计数器。这里的任何指导都会很有用。

谢谢！

【问题讨论】：

标签： typescript react-native material-ui

【解决方案1】：

const [numberOfLikes, increment] = useState<number>(0);

const like = () => increment(prevState => prevState + 1);

<Tooltip title={numberOfLikes}>
  <IconButton aria-label="Like Me" onClick={like}>
    <FavoriteIcon />
  </IconButton>
</Tooltip>

【讨论】：

感谢您的回答。另一个快速的问题 - 我将如何在图标旁边显示类似计数器？因为据我了解，您没有使用任何变量来存储它。
@DarkMatter 你的意思是重新定位工具提示吗？
不，我想在点赞图标旁边显示点赞数。我将如何显示该数字？如果问题太简单，我很抱歉。
@DarkMatter 你能提供一张图片吗？
我刚刚想通了。谢谢！