react点击图片显示EmojiPicker，点击空白隐藏EmojiPicker

你可以使用React的状态来控制EmojiPicker的显示与隐藏。具体实现可以参考以下代码：

import React, { useState } from 'react';
import EmojiPicker from 'emoji-picker-react';

function App() {
  const [showEmojiPicker, setShowEmojiPicker] = useState(false);

  const handleEmojiClick = (event, emojiObject) => {
    // 处理EmojiPicker选中的表情
    console.log(emojiObject);
  };

  const handleOutsideClick = (event) => {
    // 点击EmojiPicker以外的区域，隐藏EmojiPicker
    if (event.target.closest('.emoji-picker') === null) {
      setShowEmojiPicker(false);
    }
  };

  return (
    <div onClick={handleOutsideClick}>
      <img src="path/to/image" onClick={() => setShowEmojiPicker(true)} />
      {showEmojiPicker && (
        <EmojiPicker
          onEmojiClick={handleEmojiClick}
          pickerStyle={{ position: 'absolute', bottom: '20px', right: '20px' }}
          disableAutoFocus={true}
          className="emoji-picker"
        />
      )}
    </div>
  );
}

export default App;

在上述代码中，我们使用useState来定义一个名为showEmojiPicker的状态，它的初始值为false，表示EmojiPicker默认是隐藏的。当用户点击图片时，我们通过onClick事件将showEmojiPicker状态更新为true，从而显示EmojiPicker组件。同时，我们还绑定了一个onClick事件到App组件的根元素，当用户在EmojiPicker以外的区域点击时，我们会通过handleOutsideClick函数将showEmojiPicker状态更新为false，从而隐藏EmojiPicker组件。

另外，我们还定义了handleEmojiClick函数来处理用户在EmojiPicker中选中表情的事件，并将其传递给EmojiPicker组件的onEmojiClick属性。我们还为EmojiPicker组件设置了一些样式，使其在页面右下角显示，并且禁用了自动聚焦，避免弹出EmojiPicker时页面滚动。最后，我们还为EmojiPicker组件添加了一个className属性，以便在handleOutsideClick函数中判断用户点击的区域是否在EmojiPicker内部。