[react.js]onSubmit, preventDefault 사용방법

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

handleKeyPress 지우기

submit으로 바꾼다면 엔터 기능이 내장 되어 있으니 삭제

input 부분 form으로 감싸기

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 = e => {
    e.preventDefault(); //추가: 원래 해야될 작업을 안하게 해주는 함수
    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
    });
  };

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

export default Board;

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

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

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

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