反応フックと編集可能なボックスコンポーネント

最近、ユーザーが編集することができますユーザーフレンドリーなコンポーネントが必要なときに、ユーザーがクリックします.このポストでは、私はあなたに反応フックでそれをする方法を示します.
私は、テキスト領域のonblurとonfocus関数を使用して、編集と保存モードを扱いました.
編集モード:

保存モード:

import React, { useState } from "react";

export const EditBox = (props) => {
    const maxChar = 500;
    const rows = 10;
    const [remainedChar, setRemainedChar] = useState(500);
    const [isEditable, setEditable] = useState(false);

    const handleChange = (e) => {
        setRemainedChar(maxChar - e.target.value.length);
    };
    const handleFocus= (e) => {
        setEditable( true);
    }
    const handleBlur = (e) => {
        console.log( 'Saved:', e.target.value);
        setEditable( false);
    }

    return (
        <div className="editbox">
            <div className="custom-label" >
                <div className = "editbox-label">
                    {props.label}
                </div>
            </div>
            <textarea
                rows={rows}
                maxLength={maxChar}
                onChange={handleChange}
                onBlur={handleBlur}
                onFocus={handleFocus}
                className={`editbox-textarea ${isEditable ? "text-edit active-box" : ""} `}
            ></textarea>
            <div className={`edit-bottom  d-flex justify-content-end text-detail ${isEditable ? "" : "invisible"}`}>
                <i className="remained-char">
                    {remainedChar}/{maxChar}
                </i>
            </div>
        </div>
    );
};

export default EditBox;

私はそれが箱のように見られたいので、境界線とテキスト領域のアウトラインを取り除きました.私は列番号値を支柱として得て、残りの文字をユーザに示したので、私はそれを必要としなかったので、resizeプロパティをnoneに設定します.

/* EDITBOX --------------- */
.editbox {
  margin-bottom: 1rem;
}
.editbox textarea {
  font-family: inherit;
}

.editbox .edit-action {
  text-decoration: underline;
  font-size: 1rem;
  font-weight: normal;
}

.editbox .editbox-textarea {
  outline: none;
  border: none;
  color: var(--text-secondary);
  width: 100%;
  resize: none;
  background-color: transparent;
  border: 1px solid #C6CBD4;
  border-radius: .5rem;
  padding: 1rem;
  transition: .2s;
}

.editbox .editbox-textarea:hover{ border: #9090cc .5px solid;}

.editbox .editbox-textarea:focus,
:active,
:visited {
  outline: none;
}

.editbox .text-edit {
  color: var(--text-secondary);
  background-color: transparent;
  font-weight: normal;
}

.editbox .edit-bottom { transform: translate(-.5rem, -1.5rem);}