3-3 event, bind

  <Nav

          data={this.state.content}

          onPageChange={function (id) {

            this.setState({

              mode: "read",

              selected_id: Number(id),

            });

          }.bind(this)}

        ></Nav>

 

class Nav extends Component {

  render() {

    const data = this.props.data;

    let list = [];

    for (var i = 0; i < data.length; i++) {

      list.push(

        <li key={data[i].id}>

          <a

            href={"/content/" + data[i].id}

            onClick={function (id, e) {

              e.preventDefault();

              this.props.onPageChange(id);

            }.bind(this, data[i].id)}

          >

            {data[i].desc}

          </a>

        </li>

      );

    }

    return <ul>{list}</ul>;

  }

 

 

App의 render안의 코드

 let _title, 

      _desc = null;

    if (this.state.mode === "welcome") {

      _title = this.state.welcome.title;

      _desc = this.state.welcome.desc;

    } else if (this.state.mode === "read") {

      _title = this.state.content[this.state.selected_id].title;

      _desc = this.state.content[this.state.selected_id].desc;

    }

 

먼저 Nav에 있는 li를 만들 때 클릭을하면 onPageChange함수가 발동하도록 하고 bind를 통해서 그것을 사용할 수 있도록 한다. 또한 bind 뒤에 값을 넣으면 함수에서 변수로 사용할 수 있기에 게시물의 번호를 id에 지정하여 onPageChange에 매개변수로 넣어주어 selected_id가 바뀌도록 하였다. select_id가 바뀐다면 랜더링을 다시하기때문에

      _title = this.state.content[this.state.selected_id].title;

      _desc = this.state.content[this.state.selected_id].desc; 이렇게 되어

우리가 선택한 게시물의 내용이 

 <Content title={_title} desc={_desc}></Content>

나오게 된다.