React | onClick event (+ 컴포넌트 이벤트)

 

<a>태그 클릭 시 값을 받아와 이미지 파일 경로를 변경해 사진이 변경되도록 하는 이벤트 처리

 

Blahblah라는 컴포넌트를 잠시 주석처리(import도 주석처리)한 후, Blahblah컴포넌트 안에 있던 태그를 직접 적음

 

선수 이름을 클릭하면 value라는 어트리뷰트에 담긴 값을 받아와

file이라는 state값을 변경해 이미지 파일이 변경되도록 함

 

this.state와 this.setState함수의 차이점
this.state는 constructor함수 안에서 사용되어야 하며, 생성자의 역할을 함
this.setState는 생성자에서 설정한 state값을 변경할 때 사용

bind함수 안에 this라는 인자값을 전달함으로써 this를 onClick이벤트 함수 안에서 사용할 수 있게 됨
쉽게말해 bind함수의 인자값은 함수 안에서 사용할 수 있도록 해줌!

import React, { Component } from 'react';
import './App.css';

import Pagetitle from './components/Pagetitle';
// import Blahblah from './components/Blahblah';

class App extends Component {
  constructor(props){
    super(props);
    this.state = {
      date:new Date(),
      pacers:[
        {id:1, backnum:4, name:"Victor Oladipo"},
        {id:2, backnum:33, name:"Myles Turner"},
        {id:3, backnum:11, name:"Domantas Sabonis"}
      ],
      file:0
    }
  }
  render() {
    console.log('App js render' + this.state.file); 
    var playerlist = [];
      var list = this.state.pacers;
      for(var i=0; i<list.length; i++){
        playerlist.push(<li key={list[i].id} >                     
                      <a href="/" value={list[i].id} onClick={function (event) {
                        event.preventDefault();                        
                        this.setState({
                          file : event.target.getAttribute('value')
                        }, function(){
                          console.log("setState callback " + this.state.file)  
                          console.log(this.state.file)
                        });   
                      }.bind(this)}>
                         No {list[i].backnum} {list[i].name} </a> 
                        </li>);
      }
    return (
      <div>
        <Pagetitle maintitle="Pagetitle Component" now={this.state.date}></Pagetitle>
        <content>
          <h3>여기는 content</h3>
          <ul>
            {playerlist}
          </ul>
          <img alt="?" src={'/images/'+this.state.file+'.png'}></img>
        </content>
        {/* <Blahblah players={this.state.pacers} filename={this.state.file}></Blahblah> */}
      </div>
    );
  }
}

export default App;

 

 

props값 이용하여 uri/url/src 값 주기 참고
<img alt="?" src={'/images/'+this.state.file+'.png'}></img>

 

 

 

 

---

 

이번에는 파일로 분리한 컴포넌트를 이용해 같은 이벤트를 구현해보고자 한다!

 

우선 Blahblah컴포넌트를 다시 import해주고, 위에서 풀어 적었던 하위 태그들을 삭제한다.

 

state에 pacers에는 배열형식으로 선수 이름과 정보를, file에는 기본 값으로 0을 담아 정의되어 있다.

그리고 Blahblah에 "changeImage"라는 새로운 props를 작성했다.

 

changeImage는 함수가 담긴 props로, 컴포넌트 내에서 함수로 사용할 수 있음
setState를 이용하여 file의 값을 함수의 파라미터 값으로 변경
(역시 bind함수를 이용해 this값을 사용할 수 있도록 해주어야 함)

import React, { Component } from 'react';
import './App.css';

import Pagetitle from './components/Pagetitle';
import Blahblah from './components/Blahblah';

class App extends Component {
  constructor(props){
    super(props);
    this.state = {
      date:new Date(),
      pacers:[
        {id:1, backnum:4, name:"Victor Oladipo"},
        {id:2, backnum:33, name:"Myles Turner"},
        {id:3, backnum:11, name:"Domantas Sabonis"}
      ],
      file:0
    }
  }
  render() {
    console.log('App js render this.state.file ' + this.state.file); 
    
    return (
      <div>
        <Pagetitle maintitle="Pagetitle Component" now={this.state.date}></Pagetitle>
        <Blahblah players={this.state.pacers} filename={this.state.file}
        changeImage={function (f) {
          this.setState({
            file:f
          })
        }.bind(this)}></Blahblah>
      </div>
    );
  }
}

export default App;

 

 

그리고 Blahblah컴포넌트가 담긴 파일에서 onClick이벤트에 changeImage라는 props에 담긴 함수를 실행시킨다.

파라미터 값은 이벤트가 실행된 해당 <a>태그의 어트리뷰트인 value의 값으로 한다.

import React, { Component } from 'react';



class Blahblah extends Component {
  render() {
    console.log('Blahblah js render this.props.filename ' + this.props.filename);   
    var playerlist = [];
    var list = this.props.players;
    for(var i=0; i<list.length; i++){
      playerlist.push(<li key={list[i].id} >                     
                    <a href="/" value={list[i].id} onClick={function (event) {
                      event.preventDefault();                        
                      this.props.changeImage(event.target.getAttribute('value'));
                    }.bind(this)}>
                       No {list[i].backnum} {list[i].name} </a> 
                      </li>);
    }
    return(
      <content>
        <h3>여기는 content</h3>
        <ul>
          {playerlist}
        </ul>
        <img alt="?" src={'/images/'+this.props.filename+'.png'}></img>
      </content>
    );
  }
}

export default Blahblah;

 

 

 

두 방법 모두 실행되는 모습은 같다!

 

클릭 전

클릭하여 사진이 변경되는 모습