[英]how to render component on onClick event handler
当用户单击按钮(使用 onClick)并呈现 Popper 组件时,我试图打开一个 Popper 元素,因为我在项目数组列表中使用此 function 调用。 我想在按钮被触发后执行元素。
onClick 处理器
const onAddToPlaylistClick = (evt, ytid) => {
evt.stopPropagation();
evt.preventDefault();
console.log('here');
const element = evt.currentTarget;
console.log(element);
return (
<ShowAddToPlaylistTooltip
ytid={ytid}
element={element}
playlistState={playlistState}
userState={userState}
key={ToolTipKeys.AddToPlaylistToolTip}
/>
);
};
按钮组件
const onAddToPlaylistClick = (evt) => {
props.onAddToPlaylistClick(evt, props.ytid);
};
<IconButton className={classes.iconButton} onClick={onAddToPlaylistClick}>
<PlaylistAddIcon className={classes.icon} />
</IconButton>
波普尔元素
const ShowAddToPlaylist = (props) => {
const { ytid, userState, playlistState, element } = props;
console.log('ShowAddToPlaylist...');
const open = Boolean(element);
const uid = userState.profile.uid;
const userPlaylists = playlistState.playlistsByUser[uid] || [];
const playlistList = userPlaylists.map((pid) => ({
name: (playlistState.playlists[pid] ?? {}).name,
pid: pid,
}));
const hasPlaylists = playlistList.length > 0;
return (
<Tooltip
id={props.id}
open={props.open}
title="Add to playlist"
anchorRef={element}
>
<AddPlaylistToolTip
ytid={ytid}
playlistList={playlistList}
/>
</Tooltip>
);
};
但是 onAddToPlaylistClick 不会触发 React Element,我做错了什么?
你不能从onAddToPlaylistClick
function 渲染 JSX,但是你可以实现一些逻辑来渲染 popover(或者如果你使用一些路由器,所以重定向......)
const onAddToPlaylistClick = (evt, ytid) => {
evt.stopPropagation();
evt.preventDefault();
console.log('here');
const element = evt.currentTarget;
console.log(element);
this.setState({ element })
};
/// inside render (or `return` for function component...)
{ this.state.element && <ShowAddToPlaylistTooltip
ytid={ytid}
element={this.state.element}
playlistState={playlistState}
userState={userState}
key={ToolTipKeys.AddToPlaylistToolTip}
/>
}
如果element
state 最初是null
,则仅在单击后才会呈现弹出窗口。 关闭它使用setState({ element: null })
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.