컴포넌트 이벤트 생성

Subject 컴포넌트 수정

- 대상 컴포넌트에 onChangePage 함수를 사용한다.

- onChangePage를 실행시키는 메소드를 대상 컴포넌트에 사용한다.

App.js에서 render()의 Subject 부분

        <Subject
          title = {this.state.subject.title}
          sub= {this.state.subject.sub}
          onChangePage = {function(){
            this.setState({mode:'welcome'});
          }.bind(this)}
        ></Subject>

Subject.js에 onChangePage를 아래와 같이 만든다.

class Subject extends Component{
    render(){
      return (
        <header>
          <h1><a href = "/" onClick = {function(e){
            e.preventDefault();
            this.props.onChangePage();
          }.bind(this)}>{this.props.title}</a></h1>
          {this.props.sub}
        </header>
      );
    }
  }

 

TOC 컴포넌트 수정

 

App.js에서 render()의 TOC부분

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

TOC.js의 list 부분

lists.push(<li key = {data[i].id}><a href={"/content/"+data[i].id}>{data[i].title}</a></li>);

을 다음과 같이 수정

	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>);

 

위와 같이 바꾸었다면 Web 버튼과 TOC에 존재하는 버튼은 존재하지만, HTML - CSS - JavaScript 버튼을 눌러도 똑같은 내용밖에 출력하지 않는다. 

따라서 

App.js 수정본

class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      mode: 'read',
      selected_content_id: 2,
      subject: { title: 'WEB', sub: 'World Wide Web!' },
      welcome: { title: 'Welcome', desc: 'Hello,React!!' },
      contents: [
        { id: 1, title: 'HTML', desc: 'HTML is for information' },
        { id: 2, title: 'CSS', desc: 'CSS is for design' },
        { id: 3, title: 'JavaScript', desc: 'JS is for interactive' }
      ]
    }
  }
  render() {
    console.log('App render')
    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;
      }
    }
    return (
      <div className="App">
        <Subject
          title={this.state.subject.title}
          sub={this.state.subject.sub}
          onChangePage={function(){
            this.setState({mode:'welcome'});
          }.bind(this)}
        ></Subject>

        <TOC
         onChangePage={function(id){
          this.setState({
            mode:'read',
            selected_content_id:Number(id)
          });
          }.bind(this)}
          data={this.state.contents}
        ></TOC>
        <Content title={_title} desc={_desc}></Content>
      </div>
    );
  }
}

TOC.js 수정본

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}
            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>
    )
  }
}

 

결과