[TIL] React로 Click-To-Edit UI 구현하기

Click-To-Edit UI

• 편집하고자 하는 요소를 클릭하여 바로 편집할 수 있는 UI

React에서 Click-To-Edit UI 구현하기

• 삼항 조건 연산자를 사용하여 처음 로드 되었을 때는 <p>로, 해당 요소를 더블 클릭했을 때는 <input>으로 컨텐츠를 보여준다. <input>에서 수정된 내용으로 state를 업데이트하고 Enter 키를 누르면 다시 <p>로 돌아간다.

• Codesandbox

App.js

import { useState } from "react";

export default function App() {
  const [text, setText] = useState("Hello World");
  const [isEditable, setIsEditable] = useState(false);

  const handleDoubleClick = () => {
    setIsEditable(true);
  };

  const handleChange = (e) => {
    setText(e.target.value);
  };

  const handleKeyDown = (e) => {
    if (e.key === "Enter") {
      setIsEditable(false);
    }
  };

  return (
    <div className="App">
      <h1>Click-To-Edit UI</h1>
      <p className="description">Double click the text below to edit.</p>
      {isEditable ? (
        <input
          type="text"
          value={text}
          onChange={handleChange}
          onKeyDown={handleKeyDown}
        />
      ) : (
        <p onDoubleClick={handleDoubleClick}>{text}</p>
      )}
    </div>
  );
}