컴포넌트 이벤트 만들기

image

위와 같은 화면에서 list를 클릭하는 이벤트를 만들어서 아래의 description을 변경시키고 싶다.

해야하는 것

  1. 눌렀을 때의 인덱스를 알아야함.
  2. 눌러진 인덱스를 알았다면 target의 값을 보여줘야 함.
  3. 값을 얻어오는 과정은? -> while 혹은 for문 사용(filter알아보기)
  4. 이벤트를 호출하면 render가 다시 호출되기 때문에 컴포넌트 내부의 지역 state값을 변경시킨다면 화면이 바뀔것.

1. 선택된 인덱스를 담는 state생성

selected_content_id:2,

2. 현재 선택된 타겟의 내용을 담기

현재의 mode가 read일 경우일 때 반복문을 돌면서 selected_content_id와 같은 li 태그 값을 render 내부의 변수에 넣얻준다.

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.content.length){
        var data = this.state.content[i];
        if(data.id === this.state.selected_content_id){
          _title = data.title;
          _desc = data.desc;
          break;
        }
        i = i + 1;
      } 
      
    }

3. 눌려질 태그에 이벤트 추가하기

class TOC extends Component{
    render(){
      var data = this.props.data;
      var list = [];
      for(var i = 0; i < data.length; i++){
          list.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>);
      }
      return(
        <nav>
              <ul>
                 {list}
              </ul>
          </nav>
      );
    }
  }

클릭 이벤트가 발생하면 우선 <a>태그의 동작을 막기 위해

e.preventDefault();

e의 target을 알기 위해 data-변수 선언

 data-id = {data[i].id}

페이지를 다시 그리는 함수 호출

this.props.onChangePage(e.target.dataset.id);

내가 생각하는 동작 순서

  1. 클릭 이벤트가 발생하면 target index를 인자로 하는 onChangePage이벤트 호출
  2. 이벤트가 호출된 App.js에서 this.setState({})가 호출되었기 때문에 render새로 호출
  3. render할때 변경된 selected값과 li를 for문을 돌려서 desc에 보여질 state에 값 넣기