React

关注公众号 jb51net

关闭
首页 > 网络编程 > JavaScript > javascript类库 > React > react使用useRef

react如何使用useRef模仿抖音标题里面添加标签内容

作者:变向加后撤

本文介绍了如何模仿抖音发布页面,使用div元素作为输入框,并利用CSS样式和JavaScript动态操作DOM,实现类似于input输入框的功能,感兴趣的朋友跟随小编一起看看吧

这是抖音的发布页面,此篇文章目的就是为了模仿input输入特定的文本为标签,并且显示不同的样式,

本组件使用一个 div 元素作为输入框,通过 CSS 样式和 JavaScript 动态操作 DOM,来实现与传统 input 输入框相似的功能。用户在输入框中输入以 # 开头的文本时,组件会将其解析为标签,并使用不同的样式进行显示。

import React, { useState, FC, useRef } from 'react';
interface InputTagProps {
  value: string;
  onChange: (value: string) => void;
}
const InputTag: FC<InputTagProps> = ({ value, onChange }) => {
  const myRef = useRef<HTMLDivElement>(null);
  const [isEditing, setIsEditing] = useState(false);
  interface ParsedText {
    type: string;
    content: string;
  }
  const parseText = (input: string): ParsedText[] => {
    // 使用新的正则表达式来分割文本,保留空格
    const parts = input.split(/((?<=\s)|(?=\s)|(?=#))/g).filter(Boolean);
    return parts.reduce<ParsedText[]>((acc, part) => {
      if (part.trim() === '') {
        // 保留空格
        acc.push({ type: 'space', content: part });
      } else if (part.startsWith('#')) {
        // 修改标签的正则表达式,允许单个#
        if (/^#[\w\u4e00-\u9fa5]*$/.test(part)) {
          acc.push({ type: 'tags', content: part });
        } else {
          // 如果不是有效的标签,作为普通文本处理
          acc.push({ type: 'text', content: part });
        }
      } else {
        acc.push({ type: 'text', content: part });
      }
      return acc;
    }, []);
  };
  const handleClick = () => {
    setIsEditing(true);
    if (myRef.current) {
      myRef.current.innerText = ''; // 清空输入框内容
    }
  };
  const handleBlur = () => {
    setIsEditing(false);
    if (myRef.current) {
      const innerText = myRef.current.innerText;
      onChange(innerText); // 更新外部值
      myRef.current.innerHTML = ''; // 清空现有内容
      // 根据解析的文本动态创建子元素
      parseText(innerText).forEach((item) => {
        const span = document.createElement('span');
        span.innerText = item.content;
        span.style.color = item.type === 'tags' ? 'green' : 'black'; 
        myRef.current.appendChild(span);
      });
    }
  };
  const handleInput = (event: React.FormEvent<HTMLDivElement>) => {
    console.log("chu")
    if (myRef.current) {
      const innerText = myRef.current.innerText;
      // 清空内容以便重新填充
      myRef.current.innerHTML = '';
      // 根据解析的文本动态创建子元素
      parseText(innerText).forEach((item) => {
        const span = document.createElement('span');
        span.innerText = item.content;
        span.style.color = item.type === 'tags' ? 'green' : 'black'; 
        myRef.current.appendChild(span);
      });
      // 保持光标在最后
      const range = document.createRange();
      const selection = window.getSelection();
      range.selectNodeContents(myRef.current);
      range.collapse(false); // 将光标放在最后
      selection?.removeAllRanges();
      selection?.addRange(range);
    }
  };
  return (
    <div
      ref={myRef}
      style={{
        border: '1px solid #ccc',
        borderRadius: '4px',
        padding: '8px',
        width: '100%',
        cursor: isEditing ? 'text' : 'pointer',
      }}
      onClick={handleClick}
      onInput={handleInput} 
      onBlur={handleBlur}
      contentEditable="true"
      data-placeholder="请输入内容"
      data-node="true"
    >
    </div>
  );
};
export default InputTag;

在实现过程中,遇到了一些问题,例如无法实时处理输入、输入 # 时内容被清空等。通过不断调试和测试,最终成功解决了这些问题。这一过程提醒我们,在开发中,细致入微的测试是必不可少的。通过对代码的逐行检查和调试,我们能够发现潜在的错误和性能问题。

到此这篇关于react使用useRef模仿抖音标题里面添加标签内容的文章就介绍到这了,更多相关react使用useRef内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

您可能感兴趣的文章:
阅读全文