[React] 포커스 이벤트 주기 import { useRef }

포커스 이벤트 방법

 

import { useRef, useState } from "react";

const DiaryEditor = () => {
  const authorInput = useRef();
  const contentInput = useRef();

  const [state, setState] = useState({
    author: "",
    content: "",
    emotion: 1,
  });

  const hadleChangeState = (e) => {
    setState({
      ...state,
      [e.target.name]: e.target.value,
    });
  };

  const handleSubmit = () => {
    if (state.author.length < 1) {
      authorInput.current.focus();
      return;
    }
    if (state.content.length < 5) {
      contentInput.current.focus();
      return;
    }

    alert("저장성공");
  };

  return (
    <div className="DiaryEditor">
      <h2> 오늘의 일기</h2>
      <div>
        <input
          ref={authorInput}
          name="author"
          value={state.author}
          onChange={hadleChangeState}
        />
      </div>
      <div>
        <textarea
          ref={contentInput}
          name="content"
          value={state.content}
          onChange={hadleChangeState}
        />
      </div>
      <div>
        <b2>오늘의 감정점수 : </b2>
        <select
          name="emotion"
          value={state.emotion}
          onChange={hadleChangeState}
        >
          <option value={1}>1</option>
          <option value={2}>2</option>
          <option value={3}>3</option>
          <option value={4}>4</option>
          <option value={5}>5</option>
        </select>
      </div>
      <div>
        <button onClick={handleSubmit}>일기저장하기</button>
      </div>
    </div>
  );
};

export default DiaryEditor;

 

import { useRef } from "react"; 를 선언한다.
const authorInput = useRef();를 선언한다.

authorInput: React.MutableRefObject<undefined>는 MutableRefObject를 저장한다.
MutableRefObject는 HMEL을 접근할 수 있다.
접근하고자하는 HTML에 REF에 autorInput을 할당하면 접근이 가능하다

 authorInput.current.focus();를 사용하여 포커스를 줄 수 있다.