React學習時，自己擬定的一則小案例（table表格組件，含編輯）-有解無憂

某次在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 = https://www.cnblogs.com/JoJo-home/archive/2023/06/05/[...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 = https://www.cnblogs.com/JoJo-home/archive/2023/06/05/[];

    // 添加表頭
    const headerRow = [







        
      轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/554408.html
      標籤：其他 
      上一篇：記錄--JavaScript 中有趣的 9 個常用編碼套路
下一篇：返回列表