react 显示隐藏功能

姓名和手机号同时显示或隐藏功能

1.定义初始值，使用useReactive
useReactive: 提供响应式的操作体验，定义数据状态，不需要写useState,直接修改属性即可刷新试图。

// 定义初始值
  const state = useReactive({
    isCustomerShow: false,
    customerNameShow: '', // 名字 
    mobileShow: '', // 手机号 
  })

2.接口调用

// 会员名称接口
  const { run } = useRequest(getDecrypt, {
    // 手动触发
    manual: true, 
    // 默认参数
    defaultParams: { 
      type: 'simple',
      encryptData: customerName,
    },
    // 调用成功函数
    onSuccess: (res) => {
      state.customerNameShow = res
    },
  })

3.判断是否展示信息

  // 判断是否展示信息
  const handlerInfo = () => {
    state.isCustomerShow = !state.isCustomerShow
    // 判断customerNameShow是否存在，不存在调用接口
    if (!state.isCustomerShow) {
      run({
        type: 'simple',
        encryptData: customerName,
      })
    }
  }

4.判断展示的是手机号还是姓名

 /**
   * @description: 判断显示的是什么
   * @param {*} type 1 姓名 2 手机号
   * @return {*}string 手机号 姓名
   */
  const getMobile = (type: number) => {
    // 定义一个空字符串
    let str = ''
    // 将从后端获取的customerName进行赋值
    const customerName = state.customerNameShow
    //判断data(后端返回的数据)是否存在
    if (data) {
      // data 存在继续判断
      if (state.isCustomerShow) {
        // 判断state.isCustomerShow是否为true
        //为true 判断type为1 显示的是隐藏name,否则显示的是隐藏mobile
        str = type === 1 ? showName : mobile
      } else {
      // 为false 判断type为1 显示的是显示name,否则显示的是显示mobile
        str = type === 1 ? customerName : showMobile
      }
    } else {
      str = type === 1 ? customerName : detailsData?.showMobile
    }
    // 不存在返回 - 
    return str
  }

5.render渲染
姓名 显示隐藏icon图标

 <div className="flex-row space-x-6">
    <span className="text_1" onClick={handlerInfo}>
        {getMobile(1)}
        {state.customerShow ? (
          <DisplayIcon className="changeIcon" />
        ) : (
          <HideIcon className="changeIcon" />
       )}
     </span>
</div>

联系方式

<div>{getMobile(2)}</div>