Emoji-mart导航项第一次点击不了答案

【问题标题】：Emoji-mart navigation items can't clicked the first timeEmoji-mart导航项第一次点击不了
【发布时间】：2021-04-16 18:15:58
【问题描述】：

选择器组件第一次加载导航项时无法单击，直到我单击其中一个表情符号。

@observer
export class EmojiPicker extends React.Component<Props> {
  @observable isPickerVisible: boolean;

  handleAddEmoji = (emoji: Emoji): void => {
    this.props.onEmojiSelect(emoji);
  };

  renderPicker = (): React.ReactChild => {
    return (
      <div className={styles.pickerWrapper}>
        <Picker
          perLine={matchesMedia().mobile ? 6 : 9}
          native={true}
          showPreview={false}
          showSkinTones={false}
          color={PRIMARY_COLOR}
          onSelect={this.handleAddEmoji}
          {...this.props}
        />
      </div>
    );
  };

  render(): React.ReactChild {
    const { className } = this.props;

    return (
      <Popover
        content={this.renderPicker()}
        trigger="click"
        placement="bottomRight"
        arrowPointAtCenter
      >
        <Icon name="smile" className={className} />
      </Popover>
    );
  }
}

我将下一个库用于表情符号 https://github.com/missive/emoji-mart

【问题讨论】：

标签： javascript reactjs emoji mobx emoticons

【解决方案1】：

我遇到了类似的问题。对我有用的是切换弹出框的可见性，从 display: none, display: block 到 visibility: hidden, visibility: visible

【讨论】：