event

≪イベント｜Events｜ldap≫

function Aaa(props) {
    console.log('props', props, props.title);
        return <header>
        <h1><a href='/' onClick={(event)=>{
            event.preventDefault();
            }}>{props.title}</a></h1>
        </header>
}

<Aaa title="React" onChangeMode={()=>{
                alert('Header'); //onChangeMode
            }}></Aaa>

<Aaa title="React" onChangeMode={()=>{
                alert('Header'); //onChangeMode
            }}></Aaa>

onChangeModeというpropという値で関数を渡します.
リンクをクリックすると、その関数が呼び出され、alertが実行されます.

<h1><a href='/' onClick={(event)=>{
            event.preventDefault();
            props.onChangeMode();  

onClick-ユーザーが要素をクリックしたときに発生します.event.preventDefault()-基本動作を防止します.クリックしても再ロードされません.props.onChangeMode();-onClickの関数が呼び出されると、頭部支柱のonChangeModeが指す関数に呼び出されます.<- 명령어는 아님 (alert('header')가 출력이 된다.) App.js - Nav

function Nav(props) {
    const lis = []
    for(let i=0; i<props.topics.length; i++){
        let t =props.topics[i]
        lis.push(<li key={t.id}>
        <a id={t.id} href={'/'+t.id} onClick={(event)=>{
            event.preventDefault();
            props.onChangeMode(event.target.id); 
        }}>{t.title}</a>
        </li>)
    }
        return <nav>
            <ol> 
                {lis}
            </ol>
        </nav>
}

        <Nav topics={topics} onChangeMode={(id)=>{
            alert(id);
            }
        > </Nav>

Navをクリックしてidを呼び出す場合は、onChangeModeにid値、function NavにaタグにonClick={(event)=>{ }値を加えます.
ここからid値を得たい場合は、a 태그内にid属性を入れることができます.その後、props.onChangeMode()に活動を誘発するラベルevent.targetを加える.

event.target | event.CurrentTarget差異

event.target-イベントbundlingの最後の要素を返します.(즉 클릭된 요소를 기준으로 사용하는 경우 event.target을 사용한다.) event.currentTarget-イベントの要素をバインドし、対応する要素を返します.
言うだけではわからない.そこで、例を見てみましょう

const onTest = (event) => {
	console.log(event.target);
    console.log(event.currenttarget);
	}
<li>
	<button onClick={onTest}>
    	<span>Google</span>
    </button>
</li>

コードを実行し、ボタンをクリックします.
<span>Google</span>はevent.targetで、最も低い要素しか返されません.<button onClick={onTest}> <span>Google</span> </button>はevent.currenttargetであり、バインドされた要素buttonからイベントが返されるのが見えます.
結論:構成部品ユーザーは、タイトルをクリックする際の操作を定義できます.