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

 

 생활코딩 https://www.youtube.com/watch?v=11mTvRtXx4g&list=PLuHgQVnccGMCRv6f8H9K5Xwsdyg4sFSdi&index=26 

 

 

 

 

App state에 selected_content_id 이름을 줘서 선택된 content를 selected_content_id에 표시할 것이다.

그 값과 contents 객체에서 id 값과 비교하여 일치하는 것을 표출하도록 할 것이다.

 

App.js 에서 <TOC> 부분

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

 

App.js 에서 render() 부분

mode가 read로 변경되었을 때

this.state.contents[i].id 값과 this.state.selected_content_id 값을 비교하여 일치한다면 해당 content 내용을 표출시켜준다.

var _title, _desc = null;
    if(this.state.mode === 'welcome'){
      _title = this.state.welcome.title;
      _desc = this.state.welcome.desc;
    }else if(this.state.mode === 'read'){
      var i =0;
      while(i<this.state.contents.length){
        var data = this.state.contents[i];
        if(data.id === this.state.selected_content_id){
          _title = data.title;
          _desc = data.desc;
          break;
        }
        i=i+1;
      }
    }

 

 

선택한 내용으로 화면에 보여지기 위해 

data-id 속성 이용하기

 

여기서 e.target.dataset.id 정보를 onChangePage 함수를 호출하는 코드의 인자로 넣어주면 된다.

 

 

App.js

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

TOC.js render()

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}
                        data-id={data[i].id}
                        onClick={function(e){
                            e.preventDefault();
                            this.props.onChangePage(e.target.dataset.id);
                        }.bind(this)}
                    >{data[i].title}</a>
                </li>)
            i=i+1;
        }
        return(
            <nav>
              <ul>
                  {lists}
              </ul>
            </nav>
        );
    }

 

 

Number는 문자를 강제로 숫자로 변경해주는 함수이다.

 

 

-------

data-id 가 만약 data-iddd 라면

e.target.dataset.iddd 로 변경하면 된다.

-------

만약 속성을 이용하지 않는다면 이렇게 인자 값을 수정하여 적용할 수 있다.

import React, {Component} from 'react';

class TOC extends Component{
    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(id,e){
                            e.preventDefault();
                            this.props.onChangePage(id);
                        }.bind(this,data[i].id)}
                    >{data[i].title}</a>
                </li>)
            i=i+1;
        }
        return(
            <nav>
              <ul>
                  {lists}
              </ul>
            </nav>
        );
    }
  }
  export default TOC;