親要素のonclickを継承することから子要素を止める方法

3905 ワード
tutorial webdev react nextjs テキストリンク
それで、あなたはリンクにリダイレクトするか、どんな通常の機能もするOnClickで、divをつくりました.しかし、そのdivには、全く異なった機能または何も全くない子供要素が含まれていて、まだ親要素の機能をしています.これを修正する非常に単純な解決策があります.
このコードが反応すると仮定します
import React from 'react'

const NormalReactElement = () => {
   return (
      <div onClick={() => console.log('Parent Element!')}>
         <div id="child-element">
            <p>I am a child element</p>
         </div>
      </div>
   )
}
閉じるこの動画はお気に入りから削除されています.次のように修正します.
const NormalReactElement = () => {

   const handleChildElementClick = (e) => {
      e.stopPropagation()
      // Do other stuff here
   }

   return (
      <div onClick={() => console.log('Parent Element!')}>
         <div id="child-element" onClick={(e) => handleChildElementClick(e)}>
            <p>I am a child element</p>
         </div>
      </div>
   )
}
閉じるこの動画はお気に入りから削除されています.
どのようにセットアップをFirefoxの開発版
centos 6.8 mongodb 3を配備する.6.2主従