reactjs MUI数据网格中的“动态命名”文本字段

fivyi3re  于 2022-12-29  发布在  React
关注(0)|答案(1)|浏览(166)

我正在使用MUI数据网格,第一列值(资产描述)来自一个数组,标题Meember 1、Member 2和...也来自一个数组,我需要在每个字段中输入特定值,以便使用react-redux将记录插入到DB中。我需要为与下面粘贴的图像中显示的成员和资产关联的所有单元格使用不同的名称。x1c 0d1x

现在,我的问题是如何根据列和行为每个单元格生成动态名称,如上图所示?谢谢您的帮助。

下面是我的列和行代码。

const membersName = ["Member1", "Member2", "Member3"]; 
const assetTypes = [
    { id: 1, assetTitle: "Cash", assetType: "cash" },
    { id: 2, assetTitle: "Checking Accounts", assetType: "checkAccount" },
    { id: 3, assetTitle: "Other", assetType: "other" },
  ];

//货币值的列

const assetFileds = membersName.map((items, index) => {
    const name = "cash" + index;
    const newObject = {
      field: "member_" + index,
      headerName: items,
      flex: 1.0,
      disableClickEventBubbling: true,
      sortable: false,
      disableColumnMenu: true,
      renderCell: (params) => (
        <>
          <CurrencyValue
            fullWidth={false}
            // defaultValue={params.row.description}
            variant="standard"
            name={name}
            value={values.name}
            onChange={handleChange}
          />
          <BackupIcon
            onClick={doOpenModal}
            visibility={!values.name ? "hidden" : "visible"}
          />
        </>
      ),
    };
    return newObject;
  });

const columnForAssetTypes = {
    field: "assetTitle",
    headerName: "Asset Description",
    flex: 1.0,
    disableClickEventBubbling: true,
    sortable: false,
    disableColumnMenu: true,
  };

  //render final columns
  const renderColumns = (array, index, newItem) => {
    return [...array.slice(0, index), newItem, ...array.slice(index)];
  };
  const finalColumns = renderColumns(assetFileds, 0, columnForAssetTypes);
  //set columns and rows
  //const columns = columnsOld;
  const columns = finalColumns;
  const rows = assetTypes;


 return (
    <Container>
      <div className="about-yourself">
        <Grid container spacing={3}>
          <Grid item xs={12}>
            <div className="about-header d-flex">
              <span className="icon-w-bg-l">
                <img src={ChildCareProviderImage} alt="App user" />
              </span>
              <h3> Asset information</h3>
            </div>
            <div style={{ height: 400, width: "100%" }}>
              <DataGrid
                rows={rows}
                columns={columns}
                pageSize={5}
                rowsPerPageOptions={[5]}
                //disableSelectionOnClick
              />
            </div>
          </Grid>
        </Grid>
      </div>
 </Container>
  );
zpf6vheq

zpf6vheq1#

我不熟悉mui-datagrid,但如果我理解得好的话,这个想法是用for loop控制逻辑

membersName.map((items, index) => {
for (var i=0;i<3;i++) {
switch(i) {
case : 0 {// add code logic for "chash"
} breack;
case : 1 {// add code logic for "checking accounts"
} breack;
case : 2 {// add code logic for "other"
} breack;  
}}
}

我希望你明白

相关问题