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

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, что в большинстве случаев является действительно плохим случаем.