react編寫可編輯標題範例詳解

2022-08-23 18:00:28

需求

因為自己換工作到了新公司，上週入職，以前沒有使用過react框架，雖然前面有學習過react，但是並沒有實踐經驗

這個需求最終的效果是和石墨標題修改實現一樣的效果

初始需求

文案支援可編輯
使用者點選位置即遊標定位處
超過50字讀的時候，超出部分進行截斷
當用戶把所有內容刪除時，失去焦點時文案設定為 “無文案”三個字
編輯區域隨著編輯內容的寬度而變化，最大寬度1000px 500px
失去焦點時儲存文案內容

方案設計

在看到第一眼需求的時候，想到的時候用span和input進行切換，但是這個肯定是滿足不了需求中第2點，所以首先這個需求肯定不會是兩個標籤切換，只能一個標籤承擔展示和編輯的功能，第一反應是用html屬性contentEditable，就有了我的第一個套方案，後因為需求的第三點實現上存在問題，所以被迫換了方案二（使用input標籤），下面我們詳細說說為啥棄用方案1選用方案二以及在這過程中遇到的問題。

方案一 span + contentEditable

思路

利用h5提供contentEditble，可實現需求點的1/2/5
監聽focus事件和input時間，可以實現需求點4
監聽blur事件，可以實現需求點3

但是需求點中的3點，因為是用字數做的截斷，在這個方案中是實現不了的，所以我給出的建議方案是編輯的時候不做截斷，非編輯的時候做截斷段（是否失去焦點可用作判斷是否為編輯態的依據）

程式碼如下

演示demo：

import React, { useState, useRef, useEffect } from 'react';
import ReactDom from 'react-dom';
interface EditTextProps {
  text: string;
  // 告知父元件文案已被修改
  changeText?: (text: string) => void;
}
const EditText = function (props: EditTextProps) {
  useEffect(() => {
    setShowText(props.text);
  }, [props.text]);
  const [showText, setShowText] = useState('');
  const [isBlank, setIsBlank] = useState(false);
  const [isFocus, setIsFocus] = useState(false);
  const textRef = useRef<HTMLDivElement>(null);
  const onFocus = () => {
    setIsFocus(true)
  }
  const onInput = () => {
    // 避免失去焦點的時候，標題區域明顯的閃動
    setIsBlank(!textRef.current?.innerHTML);
  }
  const onBlur = () => {
    const newTitle = textRef.current?.innerHTML || '無標題';
    const oldTitle = props.text;
    setIsFocus(false);
    setIsBlank(false);
    // 文案更新
    if (newTitle !== oldTitle) {
      props?.changeText(newTitle);
      setShowText(getCharsByLength(newTitle, 50));
    }
    else {
      // 文案不更新
      setShowText(getCharsByLength(newTitle, 50));
      if(textRef.current) {
        textRef.current.innerHTML = getCharsByLength(newTitle, 50)
      }
    }
  }
  // 獲取前length個字元
  const getCharsByLength = (title: string, length: number) => {
    const titleLength = title.length;
    // 假設都是非中文字元，一箇中文字元的寬度可以顯示兩個非中文字元
    let maxLength = length * 2;
    const result = [];
    for (let i = 0; i < titleLength; i++) {
      const char = title[i];
      // 中文字元寬度2，非中文字元寬度1
      maxLength -= /[u4e00-u9fa5]/.test(char) ? 2 : 1;
      result.push(char);
      if (maxLength <= 0) {
        break;
      }
    }
    if (result.length < titleLength) {
      result.push('...');
    }
    return result.join('');
  };
  return <div className="title">
    {isFocus && isBlank ? <span className="title-blank">無標題</span> : ''}
    <span
      className="title-text"
      contentEditable
      suppressContentEditableWarning
      ref={textRef}
      onFocus={onFocus}
      onInput={onInput}
      onBlur={onBlur}
    >{showText}</span>
  </div>;
};

在這個方案中遇到的問題

如果在使用者修改之前的文案就是【無標題】，此時使用者刪除了文案所有的內容【將文案置空】，此時失去焦點，根據需求我們應該展示【無標題】，可是在程式碼邏輯中進行了setShowText(getCharsByLength(newTitle, 50));的處理，在不斷試探中，發現修改前後的showText一摸一樣，無法觸發dom的更新，針對這個問題我找到了兩個解決方式

方式一 在不需要更新標題，使用者觸發了失去焦點，但是並沒有修改標題時，先把showText設定為空，在setTimeout中設定會以前的標題。

嘗試了一下這個方案，從使用角度來說並不會特別明顯的閃動。不過個人覺得這個方案程式碼看著很怪異

const onBlur = () => {
    const newTitle = textRef.current?.innerHTML || '無標題';
    const oldTitle = props.text;
    setIsFocus(false);
    setIsBlank(false);
    // 文案更新
    if (newTitle !== oldTitle) {
      props?.changeText(newTitle);
      setShowText(getCharsByLength(newTitle, 50));
    }
    else {
      // 文案不更新
      setShowText('');
      setTimeout(() => {
        setShowText(getCharsByLength(newTitle, 50));
      }, 0)
    }
  }

方式二 利用ref

const onBlur = () => {
    const newTitle = textRef.current?.innerHTML || '無標題';
    const oldTitle = props.text;
    setIsFocus(false);
    setIsBlank(false);
    // 文案更新
    if (newTitle !== oldTitle) {
      props?.changeText(newTitle);
      setShowText(getCharsByLength(newTitle, 50));
    }
    else {
      // 文案不更新
      setShowText(getCharsByLength(newTitle, 50));
      if(textRef.current) {
        textRef.current.innerHTML = getCharsByLength(newTitle, 50)
      }
    }
  }

存在的問題

無法用字數做限制
如果用寬度做限制，可以出現截斷的效果，但是內容無法滑動

方案二直接用input處理展示和編輯

採用修改input框樣式的方法，讓input展示和可編輯文案。整體的效果和文章開頭展示的效果一致。 canEdit這個引數時我後面加的，用來控制EditText元件是否可以編輯。遇到的問題見面後面。演示demo：

import React, { useState, useEffect, useRef, useLayoutEffect } from 'react';
interface EditTextProps {
  text: string;
  canEdit?: boolean;
  changeText?: (text: string) => void;
}
function EditText(props: EditTextProps) {
  // 根據span獲取寬度
  const witdthRef = useRef<HTMLDivElement>(null);
  const [showText, setShowText] = useState('');
  const [isFocus, setIsFocus] = useState(false);
  const [inputWith, setInputWith] = useState(100);
  const minTitleWidth = 70;
  const maxTitleWidth = 500;
  useEffect(() => {
    setShowText(props.text);
  }, [props.text]);
  useLayoutEffect(() => {
    dealInputWidth();
  }, [showText]);
  const dealInputWidth = () => {
    const offsetWidth = witdthRef?.current?.offsetWidth || minTitleWidth;
    // +5 防止出現 截斷
    const width = offsetWidth < maxTitleWidth ? offsetWidth + 5 : maxTitleWidth;
    setInputWith(width);
  };
  const titleFocus = () => {
    setIsFocus(true);
  };
  const titleInput = (e: React.ChangeEvent<HTMLInputElement>) => {
    const newTitle = e.target.value;
    setShowText(newTitle);
  };
  const titleBlur = () => {
    const newTitle = showText || '無標題';
    const oldTitle = props.text;
    setIsFocus(false);
    if (showText !== oldTitle) {
      setShowText(newTitle);
      setIsFocus(false);
      if (props?.changeText) {
        props.changeText(newTitle);
      }
    } else {
      setIsFocus(false);
      setShowText(newTitle);
    }
  };
  return (
      <div className='wrap'>
        {props.canEdit ? (
          <input
            value={showText}
            style={{ width: inputWith }}
            onFocus={titleFocus}
            onChange={titleInput}
            onBlur={titleBlur}
            className='input'
            placeholder="無標題"
          />
        ) : (
          ''
        )}
        {/* 為了計算文字的寬度 */}
        <span ref={witdthRef} className={props.canEdit ? 'width' : 'text'}>
          {showText}
        </span>
      </div>
  );
}

踩到的坑

input自頻寬度，無法實現寬度隨著文案的改變而改變。

在方案一做出來後，就和UI進行了溝通在【編輯的時候用字數做截斷實現不了】，給出了一個建議的方案【編輯的時候不做截斷】，但是設計同學覺得不截斷的方案過醜，，，，，然後她就說能實現【石墨標題編輯】時，類似的效果互動嗎？？？於是我就開啟了研究石墨的效果的征途中。

只發現石墨用了一個input實現了不錯的效果，input後面放了一個span標籤，我體驗的時候，一直在想為什麼會有一個span標籤呢？？（小朋友，是不是滿臉疑問）

直到我發現input自頻寬度，無法隨著內容的寬度的改變而改變。此時才恍然大悟span標籤的作用。

我也採用了利用span標籤的寬度的方式來控input輸入內容的寬度。
開玩笑，咋可能這麼順利，我遇到了第二個問題

用useEffect 來監控 witdthRef.current.offsetWidth時，拿到的是上次文案的寬度經過查閱資料，我發現了useLayoutEffect這個hook，真香

以上就是react編寫可編輯標題範例詳解的詳細內容，更多關於react編寫可編輯標題的資料請關注it145.com其它相關文章！

react編寫可編輯標題範例詳解

目錄

需求

初始需求

方案設計

方案一 span + contentEditable

思路

程式碼如下

在這個方案中遇到的問題

存在的問題

方案二直接用input處理展示和編輯

踩到的坑

熱門文章

react編寫可編輯標題範例詳解

目錄

需求

初始需求

方案設計

方案一 span + contentEditable

思路

程式碼如下

在這個方案中遇到的問題

存在的問題

方案二 直接用input處理展示和編輯

踩到的坑

熱門文章

方案二直接用input處理展示和編輯