最新要闻

广告

手机

iphone11大小尺寸是多少？苹果iPhone11和iPhone13的区别是什么？

iphone11大小尺寸是多少？苹果iPhone11和iPhone13的区别是什么？

 警方通报辅警执法直播中被撞飞：犯罪嫌疑人已投案

警方通报辅警执法直播中被撞飞：犯罪嫌疑人已投案

家电

  1. 首页
  2. 移动通信
  3. 内容

React学习时，自己拟定的一则小案例（table表格组件，含编辑）

来源：博客园


(相关资料图)

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

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

在初步自学了一段时间React后，我觉得可以试一下用React实现这种效果。以下图二为练习之作，实际上对应的月份编辑已经实现如果要写成如图1那种展示和编辑，就需要td里加入div容器并对其绝对定位而相应公式了我粗略的整理了一下，并附上

          {/* 做判断，循环时得到的月和次月的做比较，如果次月依旧属于其中，则继续，直到次月不在算入规划中 */}          {/* 默认 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) */}          
 handleEdit}            ref={editRef}>            {/*  */}

具体做法，其实已经不远。感兴趣的小伙伴可以体验一下，当然，如果发现有什么地方存在问题或缺陷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 = [姓名];    months.forEach((month) => {      headerRow.push({month});    });    tableData.push({headerRow});    // 添加数据行    data.forEach((item) => {      const dataRow = [{item.name}];      months.forEach((month, index) => {        if (item.li.includes(index + 1)) {          const value = item.li[index + 1] || "";          dataRow.push(             handleEdit(item.name, month, e)}              ref={editRef}              className="sTh"            >              {value}                      );        } else {          dataRow.push();        }      });      tableData.push({dataRow});    });    return tableData;  };  return (    {renderTable()}
          
  );};
.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;}

关键词：