[생활코딩] 컴포넌트 이벤트 만들기2

 

생활코딩 https://www.youtube.com/watch?v=hR5H0OFksx8&list=PLuHgQVnccGMCRv6f8H9K5Xwsdyg4sFSdi&index=25 

 

 

 

TOC component 에서 원하는 주제를 클릭했을 때 mode를 welcom에서 read 로 변경해보자.

 

<TOC onChangePage={function(){
	this.setState({mode:'read'})
	}.bind(this)} 
	data={this.state.contents}>
</TOC>

 

 

a 태그를 onClick 을 했을 때, function이 실행되고 페이지가 바뀌지 않도록 event 객체를 받아 e.preventDefault() 를 실행한다. 그리고 this.props.onChangePage 라는 props를 실행하여 mode가 변경되도록 만든다.

 

TOC.js

import React, {Component} from 'react';

class TOC extends Component{
    render(){
        console.log('toc render');
        var lists =[];
        var data = this.props.data;
        var i =0;
        while(i < data.length){
            lists.push(
                <li key={data[i].id}>
                    <a 
                        href={"/content/"+data[i].id}
                        onClick={function(e){
                            e.preventDefault();
                            this.props.onChangePage();
                        }.bind(this)}
                    >{data[i].title}</a>
                </li>)
            i=i+1;
        }
        return(
            <nav>
              <ul>
                  {lists}
              </ul>
            </nav>
        );
    }
  }

  export default TOC;