首页 > 其他分享 >React学习时,自己拟定的一则小案例(table表格组件,含编辑)

React学习时,自己拟定的一则小案例(table表格组件,含编辑)

时间:2023-06-05 18:55:41浏览次数:40  
标签:const name month React item 组件 table li border

某次在Uniapp群看到有人问uniapp如何操作dom元素。


他想对这张表标红的区域,做dom元素获取,因为产品想让红色色块点击时,成为可编辑,渲染1~4月份之间的行程安排。
于是,有小伙伴说让他用position定位这里,点击时使红色色块层级抬高,弄个input上去。
但提问的小伙伴并没有决定这么做,随后不了了之。

在初步自学了一段时间React后,我觉得可以试一下用React实现这种效果。
以下图二为练习之作,实际上对应的月份编辑已经实现

如果要写成如图1那种展示和编辑,就需要td里加入div容器并对其绝对定位
而相应公式了我粗略的整理了一下,并附上

         <td className='sTh'>
          {/* 做判断,循环时得到的月和次月的做比较,如果次月依旧属于其中,则继续,直到次月不在算入规划中 */}
          {/* 默认 1个月为 width 90 * 1 + '%' right:'-5%'   */}
          {/* 那么 如果2月份也是 width 90 * 2 + '%' right:'-90%'  */}
          {/* 那么 如果3月份也是 width 90 * 3 + '%' right:'-185%'   -85为一刻度,初始-5% */}

          {/* 默认右侧偏移量是  100*1 -  5% *1 */}
          {/* 新增1个单位 等于  100*2 -  5% *2 */}
          {/* 新增2个单位 等于  100*3 -  5% *3 */}
          {/* (item.name, index + 1) */}
          <div className='sPo' style={{ width: 90 * 4 + '%', right: '-280%' }}
            contentEditable={true}
            suppressContentEditableWarning={true}
            onBlur={() => handleEdit}
            ref={editRef}>
            {/* <INput /> */}
          </div>
        </td>

具体做法,其实已经不远。
感兴趣的小伙伴可以体验一下,当然,如果发现有什么地方存在问题或缺陷bug,欢迎指正。

table 无状态组件
import React, { useState, useRef } from 'react';


const Table = () => {
  const [data, setData] = useState([{ name: '张三', li: [4, 9, 5, 6] }, { name: '李四', li: [11] }]);
  const editRef = useRef('null');

  // 被操作的名字
  // 被操作的月份
  // 被操作的值
  const handleEdit = (name, month, e) => {
    const newData = [...data];
    const item = newData.find((item) => item.name === name);
    item.li[month] = parseInt(e.target.innerText);
    setData(newData);
  };

  const renderTable = () => {
    const months = ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'];
    const tableData = [];

    // 添加表头
    const headerRow = [<th key="name" className='sTh'>姓名</th>];
    months.forEach((month) => {
      headerRow.push(<th key={month} className='sTh'>{month}</th>);
    });
    tableData.push(<tr key="header" className='sTh'>{headerRow}</tr>);

    // 添加数据行
    data.forEach((item) => {
      const dataRow = [<td key="name" className='sTh'>{item.name}</td>];
      months.forEach((month, index) => {
        if (item.li.includes(index + 1)) {
          const value = item.li[index + 1] || '';
          dataRow.push(
            <td
              key={month}
              style={{ backgroundColor: 'red' }}
              contentEditable={true}
              suppressContentEditableWarning={true}
              onBlur={(e) => handleEdit(item.name, month, e)}
              ref={editRef}
              className='sTh'
            >
              {value}
            </td>
          );
        } else {
          dataRow.push(<td key={month} className='sTh'></td>);
        }
      });
      tableData.push(<tr key={item.name} className='sTh'>{dataRow}</tr>);
    });

    return tableData;
  };

  return (
    <table className='sTab'>
      <tbody>{renderTable()}</tbody>
    </table>
  );
};
</details>



.sTab {
    border-collapse: collapse;
    border: 1px solid gray;
    width: 100%;
    text-align: center;
    font-size: 0.28rem;
}

/*
1. separate:默认值,边框会被分开,不会忽略border-spacing 和 empty-cells 属性。
2. collapse:如果可能,边框会合并为一个单一的边框。会忽略 border-spacing 和 empty-cells 属性。
3. inherit:规定应该从父元素继承border-collapse 属性的值
*/

.sTh {
    border: 1px solid gray;
    border-top: none;
    border-left: none;
    position: relative;
}

.sPo{
    height: 15px;
    position: absolute;
    top: 2px;
    right: -2%;
    z-index: 10;
    width: 100%;
    background: red;
}

/*
contenteditable  编辑时带来的黑框
*/
[contenteditable]:focus {
    outline: none;
}

标签:const,name,month,React,item,组件,table,li,border
From: https://www.cnblogs.com/JoJo-home/p/17458441.html

相关文章

  • echarts 曲线图组件
    样式如图使用:     <echartLine      ref="day30Echat"      :xAxis="timeList"      :xlist="xlist30Day"      :xlist2="xlist230Day"      :smooth="true"     ><......
  • 苹果MacOS系统傻瓜式本地部署AI绘画Stable Diffusion教程
    StableDiffusion的部署对小白来说非常麻烦,特别是又不懂技术的人。今天分享两个一键傻瓜式安装包,对小白来说非常有用。下面两个任选一个安装就可以。一、DiffusionBee简单介绍DiffusionBee是基于stablediffusion的一个安装包,有图形界面,直接安装就能使用,安装完成后会自行下载两......
  • 【React工作记录八十七】React+antDesign实现上传图片功能(类组件)
    前言大家好我是歌谣今天继续给大家带来工作中实战部分的一些代码的封装和认识需求实现1可以支持上传最多九张图片2图片支持预览替换删除3支持自定义上传文件大小格式未上传提示实现效果子组件封装UploadImage组件*@Description:公共上传图片*@param{Array}type图片......
  • 【React工作记录八十八】React+antDesign封装一个tab组件(类组件)
    前言我是歌谣放弃很容易但是坚持一定很酷喜欢我就一键三连哈微信公众号关注前端小歌谣在我们的工作生活中每次学习一个框架我们就不免要封装组件而具备封装一个完美组件的能力我称之为"优秀"简单的父子组件父组件<Geyao/>子组件importReact,{Component}from'react';......
  • React 动态菜单-不限级递归菜单树
    import{FC,useState}from"react";import{Layout,Menu}from'antd';import{Link}from'react-router-dom'import{getData}from"../../mock-data";const{Header,Content,Footer,Sider}=Layout;//菜单数据结构type......
  • 视频直播源码,动态合并element-ui el-table列和行
    视频直播源码,动态合并element-uiel-table列和行HTML: <template>  <div>    <el-table     :data="tableData"     show-summary     :span-method="arraySpanMethod"    style="width:100%">      <......
  • visual studio 2010 c++ 创建com组件
    在VisualStudio2010中创建COM组件需要执行以下步骤:1. 打开VisualStudio2010,选择“新建项目”。2. 在弹出的对话框中选择“VisualC++”-->“Win32”-->“Win32项目”,并选择“DLL”作为应用程序类型。3. 单击“下一步”按钮。在下一个页面上,选择“ATL”,然后单击“完......
  • 系统化学习前端之Vue(vue2 组件通信)
    前言前文vue2基础中聊过,页面本质是DOM树,而在vue2中组件=vm实例对象=DOM。因此,页面其实也是组件树构成,组件之间形成父子关系,兄弟关系等,相互之间通信也是组件树的必须要求。vue2组件通信组件通信即组件之间的数据传递。props和$emit$attrs和$listener$parent......
  • 云原生第六周--k8s组件详解(下)
    一Velero结合minio实现kubernetesetcd数据备份与恢复Velero简介:Velero是vmware开源的一个云原生的灾难恢复和迁移工具,它本身也是开源的,采用Go语言编写,可以安全的备份、恢复和迁移Kubernetes集群资源数据Velero支持标准的K8S集群,既可以是私有云平台也可以是公有云,除了灾备......
  • Lattice-Based Group Signatures With Time-Bound Keys via Redactable Signatures
    ......