Taro react 160 行实现@别人功能

最新推荐文章于 2024-09-13 17:25:30 发布

Web_boom

最新推荐文章于 2024-09-13 17:25:30 发布

阅读量552

点赞数

文章标签： react.js javascript 前端

本文链接：https://blog.csdn.net/Android_boom/article/details/125276890

版权

本文详细介绍了在Taro中利用React实现@别人功能的组件开发过程，包括需求分析、组件实现和实现细节。针对小程序文本域输入回调信息不足的问题，提出了一种算法来定位新输入字符的位置，并通过防抖技术减少搜索请求。此外，文章还讨论了如何在用户输入@后更新内容、重新获取焦点以及确保被@人名称完整存在的策略。

摘要由CSDN通过智能技术生成

需求分析

这个功能最让人头疼的地方在于小程序文本域的输入回调提供的信息过少，没办法直接判断输入位置，在 Taro 文档中提到 TextArea 的 onInput 事件会返回文本内容 value、光标位置 cursor、按键类型 keyCode 三个值。但是在我的实际测试中，只拿到了 value。

这是什么人间疾苦。

所以说，我们需要先搞一个算法来找到当前新输入了什么以及在哪输入的。

之后的问题就好办了，如果输入的是 @，就拉起动作面板，选择某个人后触发回调，在正文里插入这个人的名字，然后把对应的信息存到另一个 state 方便后续操作就可以了。

组件实现

这里先贴出来完整代码，有需要的可以直接拿去用，组件库是 taro-vant：

MentionTextarea\index.tsx

import { useReady } from "@tarojs/taro";
import { FC, forwardRef, useImperativeHandle, useRef, Ref, useState } from "react";
import { View, Textarea } from "@tarojs/components";
import { ActionSheet, Search, Cell, Notify } from "@antmjs/vantui";
import { debounce, DebouncedFunc } from 'lodash';
import { getQuestionUser } from "@/services/engineerCarbonCopyProblem";

export interface Props {
  defaultContent?: string
  className?: string
  ref?: Ref<MentionTextareaRef>
}

/**
* 抄送问题人员
*/
export interface QuestionUser {
  id: number
  originId: number
  name: string
  tel: string
  /**
  * 岗位名
  */
  type: string
}

export interface MentionTextareaRef {
  /**
   * 获取填写的内容
   * @returns [正文内容，抄送人员列表]
   */
  getContent: () => [string, QuestionUser[]]
  /**
   * 设置填写的内容
   */
  setContent: (content: string) => void
}

/**
 * 找到新旧字符串的变化
 *
 * @param oldStr 老字符串
 * @param newStr 新字符串
 * @returns [变更的字符(删除则为空), 变更的位置]
 */
const findDiffChar = (oldStr: string, newStr: string): [string, number] => {
  const arr1 = oldStr.split("");
  const arr2 = newStr.split("");

  // 用较长的内容进行遍历
  const