如何在 onClick 事件处理程序上呈现组件

Question

当用户单击按钮(使用 onClick(并呈现 Popper 组件时，我正在尝试打开 Popper 元素，因为我在项目数组列表中使用此函数调用。我想在触发按钮后执行该元素。

点击处理程序

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，我做错了什么？

Answer 1

你不能从onAddToPlaylistClick函数渲染 JSX，但你可以实现一些逻辑来渲染弹出框(或者如果你使用一些路由器，所以重定向......

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状态最初是null，则弹出框仅在单击后才会渲染。 要关闭它，请使用setState({ element: null })