React에서 편집할 수 있는 내장형 UI를 구성하는 전체 가이드

작성자 Paramanantham Harrison✏️

소개

웹 응용 프로그램의 UI는 날로 복잡해진다.더욱 강력한 클라이언트 라이브러리가 생기면 우리는 사용자 인터페이스 실험을 통해 사용자 체험의 한계를 돌파할 수 있다.
이 중 하나는 인라인 편집 가능 UI와 관련이 있습니다.대부분의 현대 웹 응용 프로그램에는 편집 가능한 UI가 내장되어 있다.
기본 내장형 편집 가능 UI
다음은 현재 사용자 인터페이스를 편집할 수 있는 내부 연결을 사용하는 가장 유명한 제품들입니다.

Asana – 편집 가능한 테이블과 양식이 내장된 최상의 사용자 정의 UI 중 하나

Google sheets – 웹에서 인라인 편집 가능한 스마트 테이블 UI

Trello – Trello 카드를 클릭하여 Trello 카드를 편집할 수 있습니다

Airtable 및 Concept는 내장형 편집 UI

를 많이 사용하는 다른 최신 어플리케이션입니다.
구글 폼 사용자 인터페이스
본고에서 우리는 간략한 버전의 Asanacreate task를 통해 React에서 기본적인 내연 편집 가능한 UI를 만드는 방법을 배울 것이다. 그 중에서taskname과description 필드만 있다.
저희가 구축할 프레젠테이션here을 보실 수 있습니다.
인라인 편집 가능 구성 요소의 사용자 정의 구현을 깊이 연구하기 전에, 서로 다른 인라인 편집 가능 UI를 실현하는 데 사용할 수 있는 모든 기존 React 구성 요소를 토론합시다.

기존 React 라이브러리

UI를 편집할 수 있는 인라인 라이브러리는 많지 않습니다.주요 원인은 내부 연결을 사용하여 편집할 수 있는 구성 요소를 사용하면 서로 다른 사용자의 수요를 만족시키기 어렵다는 것이다.
인라인 편집 가능 구성 요소에 사용되는 일부 패키지는 다음과 같습니다.
반응 내연 편집 – https://github.com/bfischer/react-inline-editing
반응 편집 내연 – https://github.com/kaivi/ReactInlineEdit
이 두 패키지는 사용자가 입력 상자로 라벨을 편집할 수 있도록 매우 간단하다.필요에 따라 스타일을 사용자 정의할 수 있습니다.
내연 편집 가능 테이블을 만들기 위해 유사한 테이블의 구조와 함께 사용할 수 있습니다.
반응 내용 편집 가능 – https://github.com/lovasoa/react-contenteditable
이것은 가장 유명한 인라인 편집 가능한 UI 패키지입니다.
이 구성 요소와 다른 구성 요소의 주요 차이점은 텍스트 내용뿐만 아니라 HTML을 내부적으로 편집할 수 있다는 것입니다.
이것은 UI의 태그 및 가격 인하 편집에 사용할 수 있습니다.
또한 편집 가능한 요소의 높이를 관리하여 입력 또는 textarea 요소의 모양을 생성할 수 있습니다.보기codesandbox.의 예
반응표-https://github.com/tannerlinsley/react-table
React table는 가장 유행하는 라이브러리 중 하나입니다. 내부 편집도 가능합니다.이러한 라이브러리 구성 요소를 사용자 정의하여 Google Sheets와 유사한 UI를 만들 수 있습니다.
테이블 레이아웃에서 편집할 수 있는 UI의 작동 방식을 보려면kitchen sink 를 참조하십시오.

편집 가능한 UI 작동 방식

먼저 편집 가능한 UI가 어떻게 작동하는지 살펴보겠습니다.

하나의 편집 가능한 UI에 태그만 표시됩니다

이 멈추면 UI를 인라인 편집할 수 있도록 테두리가 표시됩니다.

을 클릭하면 단순 레이블이 사용자 정의 입력 요소로 변환됩니다.일부 주의해야 할 입력 요소는 입력 필드textarea, 선택 구성 요소, 날짜 선택기 등

이다.

또는 Enter 를 클릭하면 초기 상태로 돌아가 레이블을 표시합니다.

를 클릭하면 입력 요소로 다시 전환되고 키보드를 사용하여 구성 요소에 액세스합니다.

우리는 Escape 기능이 없는 간단한 버전을 구축할 것이다.
쉽게 Tab 기능을 추가할 수 있지만 연습으로 남겨 드리겠습니다.my repo에 대한pull 요청 here 을 만들 수 있습니다.

편집 가능한 UI를 위한 간단한 React 구성 요소 구축

먼저 Tab 을 사용하여 간단한 React 응용 프로그램을 만듭니다.
나는 지금 Tab를 사용하여 스타일링을 하고 있다.create-react-apptailwind를 설정하는 방법에 대한 자세한 정보는 본문을 참조하십시오.tailwindcss React 구성 요소를 만듭니다.

// Editable.js
import React, { useState } from "react";

// Component accept text, placeholder values and also pass what type of Input - input, textarea so that we can use it for styling accordingly
const Editable = ({
  text,
  type,
  placeholder,
  children,
  ...props
}) => {
  // Manage the state whether to show the label or the input box. By default, label will be shown.
// Exercise: It can be made dynamic by accepting initial state as props outside the component 
  const [isEditing, setEditing] = useState(false);

// Event handler while pressing any key while editing
  const handleKeyDown = (event, type) => {
    // Handle when key is pressed
  };

/*
- It will display a label is `isEditing` is false
- It will display the children (input or textarea) if `isEditing` is true
- when input `onBlur`, we will set the default non edit mode
Note: For simplicity purpose, I removed all the classnames, you can check the repo for CSS styles
*/
  return (
    <section {...props}>
      {isEditing ? (
        <div
          onBlur={() => setEditing(false)}
          onKeyDown={e => handleKeyDown(e, type)}
        >
          {children}
        </div>
      ) : (
        <div
          onClick={() => setEditing(true)}
        >
          <span>
            {text || placeholder || "Editable content"}
          </span>
        </div>
      )}
    </section>
  );
};

export default Editable;

구성 요소는 매우 간단합니다.

상태가true이면 하위 레벨이 표시됩니다.이것이 바로 우리가 create-react-app 또는 Editable 원소를 전달하는 곳이다.입력 상태는 이 구성 요소 외부에서 관리됩니다.

isEditing 상태가false인 경우 텍스트 값이 비어 있는지에 따라 단순 레이블input 또는textarea을 표시합니다.

간단한 입력으로 편집할 수 있는 구성 요소가 어떤 모양인지 봅시다.

// App.js - Input editable UI

import React, { useState } from "react";
import Editable from "./Editable";

function App() {
  // State for the input
  const [task, setTask] = useState("");

  /*
    Enclose the input element as the children to the Editable component to make it as inline editable.
  */
  return (
    <Editable
      text={task}
      placeholder="Write a task name"
      type="input"
    >
      <input
        type="text"
        name="task"
        placeholder="Write a task name"
        value={task}
        onChange={e => setTask(e.target.value)}
      />
    </Editable>
  );
}

export default App;

여기에서 우리는 isEditing 구성 요소에 봉인할 것이다.사용자 정의 양식 구성 요소를 편집할 수 있는 UI로 묶을 수 있습니다.
이것은 매우 간단한 예입니다. 편집 가능한 UI에 대해 더 복잡한 예시를 만들려면 text 또는 사용자 정의 연결을 만들어서 편집 가능한 구성 요소 이외의 모든 상태를 관리할 수 있습니다.
편집 가능한 구성 요소가 aplaceholder를 위해 어떻게 작동하는지 살펴보겠습니다.

<Editable
  text={description}
  placeholder="Description for the task"
  type="textarea"
>
  <textarea
    name="description"
    placeholder="Description for the task"
    rows="5"
    value={description}
    onChange={e => setDescription(e.target.value)}
  />
</Editable&gt

이렇게 간단해.우리는 단지 input 입력 요소를 대체했을 뿐, 전송 Editable 구성 요소의 유형에 따라 적당한 CSS를 제공하기만 하면 작동할 수 있다.
그러나 우리는 우리가 몇 가지 문제에 부딪혔다는 것을 알게 될 것이다.

탭을 눌렀을 때, 입력 요소에 자동으로 초점을 맞추지 않습니다.

키를 사용하여 간단한 양식을 탐색할 수 있습니다.그러나 이 기능을 수동으로 실행하지 않으면 인라인 편집 UI를 탐색할 수 없습니다.

초점 문제 해결

초점 문제를 해결하기 위해서는 입력 요소에 대한 인용을 사용하고 편집 상태를 설정할 때 초점 설정을 해야 합니다.

// App.js
import React, { useRef, useState } from "react";
import Editable from "./Editable";

function App() {
  /* 
    1. create a reference using use reference and add the ref={inputRef} to input element
    2. pass this reference to the Editable component, use different name than ref, I used `childRef`. Its basically a normal prop carrying the input element reference.
  */
  const inputRef = useRef();
  const [task, setTask] = useState("");

  return (
    <Editable
      text={task}
      placeholder="Write a task name"
      childRef={inputRef}
      type="input"
    >
      <input
        ref={inputRef}
        type="text"
        name="task"
        placeholder="Write a task name"
        value={task}
        onChange={e => setTask(e.target.value)}
      />
    </Editable>
  );
}
export default App;

다음은 요소 참조를 입력해서 Higher order components 구성 요소에 전달하고 textarea 상태가 textarea 일 때 초점을 맞춥니다.

// Editable.js
import React, { useState, useEffect } from "react";
import "./Editable.css";

const Editable = ({ childRef, ... }) => {
  const [isEditing, setEditing] = useState(false);

  /* 
    using use effect, when isEditing state is changing, check whether it is set to true, if true, then focus on the reference element
  */ 
  useEffect(() => {
    if (childRef && childRef.current && isEditing === true) {
      childRef.current.focus();
    }
  }, [isEditing, childRef]);

  const handleKeyDown = (event, type) => {
    ...
  };

  return (
    ...
};

export default Editable;

키 제어 이벤트 장애

다음은 키 이벤트를 처리할 때 주의해야 할 몇 가지입니다.
입력 요소의 경우:

모든 키(Enter, Escape 및 Tab 키)는 Editable 상태를false로 설정합니다.

Tab:

Enter 키는 Editable 안에 새 줄을 추가해야 하기 때문에 이 용례를 단독으로 처리해야 합니다.

const handleKeyDown = (event, type) => {
    const { key } = event;
    const keys = ["Escape", "Tab"];
    const enterKey = "Enter";
    const allKeys = [...keys, enterKey]; // All keys array

  /* 
    - For textarea, check only Escape and Tab key and set the state to false
    - For everything else, all three keys will set the state to false
  */
    if (
      (type === "textarea" && keys.indexOf(key) > -1) ||
      (type !== "textarea" && allKeys.indexOf(key) > -1)
    ) {
      setEditing(false);
    }
}:

연습: iEdit 키를 사용하여 탐색하는 양식에 대한 액세스 가능성

기본적으로 및 true 입력은 숨겨져 있습니다.따라서 우리는 isEditing 키를 누르기만 하면 폼 필드를 탐색할 수 없다.
키보드 지원을 위해서는 구성 요소나 전체 페이지의 textarea 키 이벤트를 감시하고 각 요소의 상태를 수동으로 설정해야 합니다.그리고 다음 키를 눌렀을 때 다음 폼 요소로 이동할 수 있습니다.
우리는 예시 코드에서 이 점을 실현하지 않았지만, React에서 페이지의 키 이벤트를 처리할 수 있는지 확인해 볼 가치가 있습니다.

인라인 사용 시 UI 편집 가능

가장 기본적인 양식 요구 사항에 대해서는 인라인 편집 UI를 사용할 필요가 없습니다.
그러나 복잡한 웹 응용 프로그램에 대해 편집 옵션이 있는 내용이 많으면 한 곳에서 보기와 편집을 구축하는 것이 좋습니다.그렇지 않으면 두 개의 다른 UI를 유지해야 합니다.

인라인 편집 가능 UI의 문제점

인라인 편집 가능 UI에서 가장 큰 문제는 표시 오류입니다.사용자 체험을 고려할 때, 당신은 반드시 이 점을 고려해야 한다.
마우스 이벤트를 지원하는 데 필요한 접근성 수준에 도달하기 어려울 수도 있습니다.사건을 만지는 것도 문제일 수 있다.
마지막으로 폼 요소를 숨겼을 때 모바일 장치를 지원하는 것은 어려울 수 있습니다.사용자 인터페이스가 모바일 레이아웃을 지원해야 한다면, 터치스크린에서 온라인으로 편집할 수 있는 필드를 표시하는 데 멈추지 않기 때문에 매우 까다롭다.

결론

이것은 React에서 인라인 편집 가능한 구성 요소를 만드는 것에 대한 간단한 설명과 개요입니다.
기존 구성 요소를 사용하려고 시도하지만, 기존 구성 요소가 사용자의 요구에 맞지 않으면 사용자 정의 구성 요소를 만들 수 있습니다.
데모 here 와 코드 라이브러리 here 를 볼 수 있습니다.
내연 편집 UI에 대한 경험을 댓글로 공유하세요!
편집자: 이 문장에 무슨 문제가 있습니까?정확한 버전here을 찾을 수 있습니다.

플러그인: 네트워크 어플리케이션용 DVR용 LogRocket

 

 
LogRocket는 프런트엔드 로그 기록 도구로 자신의 브라우저에서처럼 문제를 재생할 수 있다.LogRocket은 오류가 발생한 원인을 추측하거나 화면 캡처와 로그 저장을 물어보지 않고 세션을 다시 재생할 수 있도록 합니다.프레임워크가 어떻든지 간에 모든 응용 프로그램과 완벽하게 어울릴 수 있으며, 플러그인은 Redux, Vuex, @ngrx/store의 추가 상하문을 기록합니다.
 
LogRocket은 Redux 작업과 상태를 기록하는 것 외에도 콘솔 로그, JavaScript 오류, 스택 추적, 헤더+본문이 있는 네트워크 요청/응답, 브라우저 메타데이터와 사용자 정의 로그를 기록합니다.또한 DOM을 사용하여 페이지에 HTML과 CSS를 기록하여 가장 복잡한 단일 페이지 응용 프로그램이라도 픽셀 수준의 비디오를 재구성합니다.
 
Try it for free .
게시물The complete guide to building inline editable UI in React이 먼저 LogRocket Blog에 올라왔다.