[react.js]ref 사용방법

리스트 등록 후 자동으로 input1에 위치 시키고 싶을때

커서를 강제로 바꾸고 싶을때 사용하는 기능

components/Board.js

import React, { Component } from 'react';

class Board extends Component {
  state = {
    input1: '',
    input2: '',
    list: []
  };
  num = 0;
  resetInput = null; //추가

  //모든 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;
    this.resetInput.focus(); //추가
  };

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

  render() {
    const { handleChange, handleCreate, handleRemove } = this;
    const { input1, input2, list } = this.state;
    return (
      <div>
        <div>
          <form onSubmit={handleCreate}>
            <input
              type="text"
              name="input1"
              onChange={handleChange}
              value={input1}
              ref={ref => (this.resetInput = ref)} {/*추가*/}
            />
            <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 사용방법

2019/10/14 - [프로그램 강좌] - [react.js]onSubmit, preventDefault 사용방법