Обнаружение щелчка за пределами компонента реагирует способом, НЕ доступ

Question

Я реализую функцию обрезки с помощью React. Когда пользователь щелкает правой кнопкой мыши, появляется контекстное меню. В контекстном меню пользователь может выбрать пункт обрезки. Когда пользователь выбирает обрезку, обрезка активируется. Теперь я хочу закрыть состояние обрезки, когда пользователь щелкает за пределами этого подразделения. Как мне реагировать без DOM-манипуляций? Или я должен использовать манипуляции с DOM, такие как add EventListener & removeListener? Каковы недостатки использования доступа DOM здесь? Пожалуйста, дайте мне знать это полностью, так как это будет реализовано во многих функциях, которые я собираюсь разработать. Например, контекстное меню, о котором я говорил, или выпадающее меню.

Вот пример для справки - Песочница . Теперь, когда пользователь щелкает вне компонента ReactCrop, я хочу закрыть обрезку способом реакции.

Я не хочу продолжать с document.addEventListener or removeListener.

Answer 1

Если вы действительно не хотите прикреплять события dom к своим компонентам, вы можете добавить компонент dismisser позади компонента Crop и обработать сброс там.

const Dismisser = ({ onClick }) => <div onClick={onClick} style={{
  position: 'fixed',
  top: 0, left: 0, right: 0, bottom: 0,
  zIndex: 100,
}} />

В вашем компоненте:

{src && (
  <React.Fragment>
  <div style={{position: 'relative', zIndex: 200}}>
    <ReactCrop
      src={src}
      crop={crop}
      ...
    />
  </div>
  <Dismisser onClick={this.resetCrop} />
  </React.Fragment>
)}

Codesandbox

Я бы сказал, что это немного больше «React-y», так как ответственность за переустановку культуры делегирована другому компоненту. Однако это создаст вам проблемы, когда ваш компонент Crop находится позади другого элемента Dom, z-index. Вы можете преодолеть это с помощью портала, но он станет сложным.

Я думаю, что присоединение DOM-события является допустимым решением (если вы не забыли их удалить). Это проще, плюс не похоже, что вы напрямую манипулируете dom-узлом, используя данные вне потока React, что в большинстве случаев является очень плохим случаем.