クラスが見つからないときにエラーをトリガーしないように書き換えます。

Question

ユーザーがクリックしてドロップダウンを非表示にするかどうかを判断するときに、現在以下の機能を使用しています。すべて正常に動作しますが、本文をクリックすると次のように記録されます。

私は数回書き直そうとしましたが、この問題を解決する方法が見つかりません。私は

if (!event.target.className.includes('USERBAR_notifications') && !event.target.parentElement.className.includes('USERBAR_notifications') && !event.target.className.includes('USERBAR_user') && !event.target.parentElement.className.includes('USERBAR_user') && this.state.active !== '') { 
      this.setState({ active: ''}); 
     } 

Answer 1

は、以下の

if (this.state.active !== '' && !event.target.className.includes('USERBAR_notifications') && !event.target.className.includes('USERBAR_user') && 
    (!event.target.parentElement || (!event.target.parentElement.className.includes('USERBAR_notifications') && !event.target.parentElement.className.includes('USERBAR_user')))) 
    {this.setState({ active: ''});} 

Answer 2

を使用

Uncaught TypeError: Cannot read property 'className' of null 

機能は(と!event.target.className.includes('USERBAR_notifications')間event.target &&を追加します。

Answer 3

event.targetとevent.target.parentElementの両方が未定義/ nullにすることができますので、あなたはそれらのプロパティのいずれかのアクセスしようとする前に、まずあなたは彼らがnullでないかどうかを確認するために、それらの両方をチェックする必要があります：clickリスナーで

if (event.target && event.target.parentElement && 
    !event.target.className.includes('USERBAR_notifications') && 
    !event.target.parentElement.className.includes('USERBAR_notifications') && 
    !event.target.className.includes('USERBARa_user') && 
    !event.target.parentElement.className.includes('USERBAR_user') && 
    this.state.active !== '') { 
     this.setState({ active: ''}); 
} 

Answer 4

をevent.targetはundefinedにはなりませんが、body要素をキャッチすると、event.target.parentElementはundefinedになります。だから、単に `場合（event.target！= nullの&& event.target.parentElement！= null）の中でそれをすべてラップbodyがキャッチ場合

if (event.target.tagName.toLowerCase == 'body' || !event.target.className.includes('USERBAR_notifications') && !event.target.parentElement.className.includes('USERBAR_notifications') && !event.target.className.includes('USERBAR_user') && !event.target.parentElement.className.includes('USERBAR_user') && this.state.active !== '') { 
      this.setState({ active: ''}); 
}