리액트 이벤트 조작([e.target.name] : e.target.value)

import React, { Component } from "react";

class EventPractice_class extends Component {
  state = {
    username: "",
    message: ""
  };

  handleChange = e => {
    this.setState({
      [e.target.name]: e.target.value
    });
  };

  hendleClick = () => {
    alert(this.state.username + " : " + this.state.message);
    this.setState({
      message: "",
      username: ""
    });
  };

  render() {
    return (
      <div>
        <h1>이벤트 연습</h1>
        <input
          type="text"
          name="username"
          placeholder="사용자명"
          value={this.state.username}
          onChange={this.handleChange}
        />
        <input
          type="text"
          name="message"
          placeholder="아무거나 입력하세요"
          value={this.state.message}
          onChange={this.handleChange}
        />
        <button onClick={this.hendleClick}>확인하기</button>
      </div>
    );
  }
}

export default EventPractice_class;

 

이거 코드 하나면 이벤트 장은 끝.

  handleChange = e => {
    this.setState({
      [e.target.name]: e.target.value
    });
  };

 

객체 안에서 key를 [ ]로 감싸면 그 안에 넣은 레퍼런스가 가리키는 실제 값이 key 값으로 사용됩니다.

예를 들어 다음과 같은 객체를 만들면 아래와 같은 결과를 얻을 수 있다.

const name = 'variantKey';
const object = {
  [name] : 'value'
};

//결과 값
{
  'variantKey' : 'value'
}

 

같이 보면 좋을 예제: 139 page

 

 

출처: 리액트를 다루는 기술

 

 

 

 

 

 

이 포스팅은 쿠팡 파트너스 활동의 일환으로, 이에 따른 일정액의 수수료를 제공받습니다.