第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

為了賬號安全，請及時綁定郵箱和手機立即綁定
已解決430363個問題，去搜搜看，總會有你想問的

使用材料ui進行反應的動態(tài)表

使用材料ui進行反應的動態(tài)表

繁華開滿天機 2023-05-25 17:36:43
我在將下面的代碼轉換為 reactJs 時遇到問題，我面臨的問題是在這里根據(jù)行/單元格的數(shù)量使用和更新表標簽，但在反應中我不想使用 createElement/appendChild，我正在使用 useState 來獲取計數(shù)，但 Table 標簽沒有按預期工作。不確定讓這個標簽做出反應或使用材料 ui 的方式是什么。鏈接：https ://codesandbox.io/s/muddy-bird-qu9bg?file=/src/DataTable.jsfunction CreateTable() {    var rowCtr;    var cellCtr;    var rowCnt;    var cellCnt;    var myTableDiv = document.getElementById("myDynamicTable");    var table = document.createElement('Table');    table.setAttribute("contenteditable", "true");    table.border = '1';    table.id = 'myTable';    var tableBody = document.createElement('Tbody');    table.appendChild(tableBody);    rowCnt = document.getElementById('txtrows').value;    cellCnt = document.getElementById('txtcols').value;    for (var rowCtr = 0; rowCtr < rowCnt; rowCtr++) {        var tr = document.createElement('tr');        tableBody.appendChild(tr);        for (var cellCtr = 0; cellCtr < cellCnt; cellCtr++) {            var td = document.createElement('td');            td.width = '120';            td.appendChild(document.createTextNode("Click me, Row:" + rowCtr + " Column:" + cellCtr));            tr.appendChild(td);        }    }    myTableDiv.appendChild(table);    }<table contenteditable = "true">    <tr>        <td>Row Count</td>        <td>Column Count</td>        <td></td>    </tr>    <tr>        <td><input type="text" id="txtrows" /></td>        <td><input type="text" id="txtcols"/></td>        <td><button onclick="CreateTable()">Create Table</button></td>    </tr></table><div id="myDynamicTable"></div>
查看完整描述

1 回答

?
慕田峪7331174

TA貢獻1828條經(jīng)驗 獲得超13個贊

你需要使DataTable.js文件像，


import React, { Fragment, useState } from "react";

import Table from "@material-ui/core/Table";

import TableHead from "@material-ui/core/TableHead";

import TableBody from "@material-ui/core/TableBody";

import TableCell from "@material-ui/core/TableCell";

import TableRow from "@material-ui/core/TableRow";

import Button from "@material-ui/core/Button";


export default function DataTable() {

  const [rowCount, setRowCount] = useState("");

  const [colCount, setColCount] = useState("");


  const [rowCountArray, setRowCountArray] = useState([]);

  const [colCountArray, setColCountArray] = useState([]);


  const [showTable, setShowTable] = useState(false);


  const CreateTable = () => {

     rowCountArray.length = 0;

     colCountArray.length = 0;


    for (let i = 1; i <= rowCount; i++) {

      rowCountArray.push(i);

    }

    setRowCountArray(rowCountArray);


    for (let i = 1; i <= colCount; i++) {

      colCountArray.push(i);

    }

    setColCountArray(colCountArray);


    setShowTable(true);

  };


  return (

    <>

      <Table>

        <TableHead>

          <TableRow>

            <TableCell>Row Count</TableCell>

            <TableCell>Col Count</TableCell>

            <TableCell></TableCell>

          </TableRow>

        </TableHead>

        <TableBody>

          <TableRow>

            <TableCell component="th" scope="row">

              <input

                type="text"

                id="txtrows"

                value={rowCount}

                onChange={(e) => setRowCount(e.target.value)}

              />

            </TableCell>

            <TableCell component="th" scope="row">

              <input

                type="text"

                id="txtcols"

                value={colCount}

                onChange={(e) => setColCount(e.target.value)}

              />

            </TableCell>

            <TableCell>

              <Button variant="contained" color="primary" onClick={CreateTable}>

                Create Table

              </Button>

            </TableCell>

          </TableRow>

        </TableBody>

      </Table>

      {showTable ? (

        <Table>

          <TableBody>

            {rowCountArray.map((row, index) => (

              <TableRow key={index}>

                {colCountArray.map((col, index) => (

                  <TableCell key={index}>

                    Row {row} - Col {col}

                  </TableCell>

                ))}

              </TableRow>

            ))}

          </TableBody>

        </Table>

      ) : null}

    </>

  );

}

單擊“創(chuàng)建表”按鈕，您可以創(chuàng)建一個函數(shù)并根據(jù)輸入的計數(shù)生成一個rowCount數(shù)組colCount，


    const CreateTable = () => {


      rowCountArray.length = 0;

      colCountArray.length = 0;


      for (let i = 1; i <= rowCount; i++) {

         rowCountArray.push(i);

      }

      setRowCountArray(rowCountArray);

        

      for (let i = 1; i <= colCount; i++) {

         colCountArray.push(i);

      }

      setColCountArray(colCountArray);

        

     setShowTable(true);

   };

然后使用以下方法，您可以生成具有相應行和列的表，


{rowCountArray.map((row, index) => (

   <TableRow key={index}>

      {colCountArray.map((col, index) => (

        <TableCell key={index}>

          Row {row} - Col {col}

        </TableCell>

       ))}

   </TableRow>

 ))}


查看完整回答
反對 回復 2023-05-25
  • 1 回答
  • 0 關注
  • 131 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯(lián)系客服咨詢優(yōu)惠詳情

 幫助反饋 APP下載

慕課網(wǎng)APP
您的移動學習伙伴

 公眾號

掃描二維碼
關注慕課網(wǎng)微信公眾號