리액트 react 이벤트(event)

      <Header title="WEB" onChangeMod={function(){

        alert('Header');

      }}></Header>

function Header(props) {

  return <header>

  <h1><a href="/" onClick={function(event){

    event.preventDefault(); // 기본 동작 방지

    props.onChangeMod();

  }}>{props.title}</a></h1>

</header>

}

 

결과

 

축약형 어로우 펑션

      <Header title="WEB" onChangeMod={()=>{

        alert('Header');

      }}></Header>

function Header(props) {

  return <header>

  <h1><a href="/" onClick={(event)=>{

    event.preventDefault(); // 기본 동작 방지

    props.onChangeMod();

  }}>{props.title}</a></h1>

</header>

}

 

태그가 복수일때

  const topics = [

    {id:1, title:'html', body:'html is ...'},

    {id:2, title:'css', body:'css is ...'},

    {id:3, title:'javascript', body:'javascript is ...'}

  ]

 

 

      <Nav topics={topics} onChangeMod={(id)=>{

        alert(id);

      }}></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={'/read/'+t.id} onClick={event=>{

        event.preventDefault();

        props.onChangeMod(event.target.id);

      }}>{t.title}</a>

      </li>);

  }

  return <nav>

  <ol>

    {lis}

  </ol>

</nav>

}

onChangeMod 에 id 값을 필요로 하기 때문에 각 a 태그의 id 값을 event.target.id를 통해 가져옴

 

결과