如何解决尝试让 Button 复制 URL 并使用 React Hooks 呈现小吃栏
我仍在学习 React 钩子。正如标题所述,当用户点击标有“复制到剪贴板”的按钮时,我当然希望它复制 url(它确实如此),然后我试图使用效果,以便它还显示一个小吃栏(来自 materialui)告诉用户网站已成功复制到剪贴板。
我收到错误:
“期望赋值或函数调用,却看到一个表达式 no-unused-expressions”
我知道这与我如何在 useEffect 中调用“setopenWebsiteSnackbar”有关。我确定有一个简单的解决方案,我只是不明白。
const [isCopiedWebsite,setCopiedWebsite] = useClipboard("https://www.websiteIwanttoCopy.com");
useEffect(() => {setopenWebsiteSnackbar,console.log("Website Copied")},[isCopiedWebsite]
)
const [openWebsiteSnackbar,setopenWebsiteSnackbar] = React.useState(false);
const handleClickWebsite = () => {
setopenWebsiteSnackbar(true);
};
const handleCloseWebsite = (event,reason) => {
if (reason === 'clickaway') {
return;
}
setopenWebsiteSnackbar(false);
};
return (
<Button variant="contained" size="large" color="secondary" onClick={setCopiedWebsite}>Copy to Clipboard</Button>
<div className={classes.root}>
<Snackbar open={openWebsiteSnackbar} autoHideDuration={6000} onClose={handleCloseWebsite }>
<Alert onClose={handleCloseWebsite } severity="success">
Website URL successfully copied!
</Alert>
</Snackbar>
)
解决方法
setopenWebsiteSnackbar
是一个函数。您当前在其他地方调用该函数,例如:
setopenWebsiteSnackbar(true);
但是在您的 useEffect
中您没有调用它,您只是对它有一个未使用的引用:
setopenWebsiteSnackbar,
逗号在那里也没有多大意义。您是要调用该函数吗?:
useEffect(() => {
setopenWebsiteSnackbar(true);
console.log("Website Copied");
},[isCopiedWebsite]);
基本上,如果您希望“效果”是小吃栏打开,那么您需要调用该函数并更新该状态以执行此操作。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。