본문 바로가기

프로그램 강좌

[react.js]onKeyPress 사용방법

※ 이 강의는 velopert 님이 하셨던 강의 복습하는 중에 제 스스로 이해한 내용을 담은 내용입니다.

함수 및 기능 추가하기

components/Board.js

import React, { Component } from 'react';

class Board extends Component {
  state = {
    input1: '',
    input2: '',
    list: []
  };
  num = 0;

  //모든 input 제어
  handleChange = e => {
    const { name, value } = e.target;
    this.setState({
      [name]: value
    });
  };

  //추가 명령을 수행할 함수
  handleCreate = () => {
    const { input1, input2, list } = this.state;
    this.setState({
      list: list.concat({
        num: this.num,
        input1: input1,
        input2: input2
      }),
      input1: '',
      input2: ''
    });
    this.num += 1;
  };

  //리스트 삭제할 함수
  handleRemove = num => {
    const { list } = this.state;
    const nextList = list.filter(item => {
      return item.num !== num;
    });
    this.setState({
      list: nextList
    });
  };

  //엔터로 등록하기
  handleKeyPress = e => {
    console.log(e.key);
    if (e.key === 'Enter') {
      this.handleCreate();
    }
  };

  render() {
    const { handleChange, handleCreate, handleRemove, handleKeyPress } = this;
    const { input1, input2, list } = this.state;
    return (
      <div>
        <div>
          <input
            type="text"
            name="input1"
            onChange={handleChange}
            value={input1}
          />
          <input
            type="text"
            name="input2"
            onChange={handleChange}
            onKeyPress={handleKeyPress}
            value={input2}
          />
          <button onClick={handleCreate}>추가</button>
        </div>
        <div>
          <ul>
            {list.map(item => {
              return (
                <li key={item.num}>
                  {item.input1} / {item.input2}
                  <button onClick={() => handleRemove(item.num)}>X</button>
                </li>
              );
            })}
          </ul>
          {JSON.stringify(this.state.list)}
        </div>
      </div>
    );
  }
}

export default Board;

 

2019/10/10 - [프로그램 강좌] - [react.js]onChange 사용법

2019/10/11 - [프로그램 강좌] - [react.js]리스트 추가하는 방법

2019/10/12 - [프로그램 강좌] - [react.js]리스트 글 지우는 방법



728x90