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

Question

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

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

Answer 1

你不能从onAddToPlaylistClick函数渲染JSX，但是你可以实现一些逻辑来渲染popover（或者如果你使用一些Router所以重定向......）

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 })