【react】全局搜索技术点总结

1. 根据后端返回的dataMenu数组的id值，来获取dataList数组中对应的id的数据，按后端返回id顺序进行渲染数据

技术使用：find() 方法返回符合指定条件（函数内判断）的数组的第一个元素的值

const  dataMenu= [1,3]
const dataList = [{
	　　id: 1,
	　　name: '测试测试'
	},{
	　　id: 2,
	　　name: '测试测hi测hi'　　
	},{
	　　id: 3,
	　　name: '测试测hi测hi'　　
}]

const newArr = dataMenu.map(item=>{
　　return dataList.find(item2 =>item2.id === item)
})

// 打印结果： [{ id: 1, name: '测试测试' },{ id: 3, name: '测试测hi测hi' }]

2. 将输入框输入的值和下拉面板中的每一条数据进行比较，每条数据中的字与输入框中的字相同，字体颜色为蓝色

技术使用：dangerouslySetInnerHTML 是React标签的一个属性，类似于angular的ng-bind；它有2个{{ }}，第一{ }代表jsx语法开始，第二个{ }是代表dangerouslySetInnerHTML接收的是一个对象键值对；既可以插入DOM，又可以插入字符串。
replace() 方法用于在字符串中用一些字符替换另一些字符，或替换一个与正则表达式匹配的子串。使用此方法可以替换字符串中的字符；全局替换；确保大写字母的正确性；转换姓名的格式；转换引号；单词的首字母转换为大写。

const values='哈哈哈'  // 输入框中的值
<div>
  {newArr.map((item: any, index: number) => {
  // 查询全局的values值，不区分大小写
  const r = new RegExp(values, 'gi');
    return (
      index < 7 && (
        <Menus
          key={item.id}
          className="item_menu"
          onClick={() => handlerMenuItem(item.url, item.name)}
          dangerouslySetInnerHTML={{
             __html: item.name.replace(r, `<span>${values}</span>`),
          }}
        />
      )
    );
  })}
</div>

字体样式

const Menus = styled.div`
  span {
    color: #1965ff;
    font-weight: 400;
    font-size: 14px;
    line-height: 22px;
  }
`;
export { Menus };

3. 将搜索框中的值存入缓存

使用技术：useLocalStorageState 将状态存储在 localStorage 中的 Hook ，serializer 自定义序列化方法，deserializer 自定义反序列化方法。
JSON.parse() 方法用于与服务端交换数据，在接收服务器数据时一般是字符串，不能存储 Date 对象。字符串转化为数组。
JSON.stringify() 方法用于将 JavaScript 值转换为 JSON 字符串。

import { useLocalStorageState } from 'ahooks';

// 存到缓存里的值
const [nameLists, setNamelist] = useLocalStorageState<string | undefined>('menuName', {
    defaultValue: '[]',
});
// 搜索组件返回的方法
const handlerValue = (e: string) => {
    setValues(e);
    if (e) {
      // 搜索的值前置
      const name = [e, ...JSON.parse(nameLists)];
      // 数组去重，并且只存前7条数据
      const nameRemoval = Array.from(new Set(name)).splice(0, 7);
      // 转化为字符串的形式
      setNamelist(JSON.stringify([...nameRemoval]));
    }
};
// 使用缓存中的值 
console.log(JSON.parse(nameLists),'111') 

4.空白处点击，下拉面板隐藏

使用技术：useClickAway 监听目标元素外的点击事件。

import {  useClickAway  } from 'ahooks';

const doorRef = useRef<HTMLDivElement>(null);
// 下拉面板是否展示
const [display, setDisplay] = useState(false);
// 空白区域 下拉面板关闭
useClickAway(() => {
     setDisplay(true);
}, doorRef);
// 点击搜索框下拉面板打开
const handlerDisplay = () => {
    setDisplay(true);
};

// 下拉面板区域
<div ref={doorRef} onClick={handlerDisplay}>
  <div> 搜索区域 </div>
  {display && <div> 下拉面板 </div>}
  
</div>