javascript 我如何使用自定义编辑组件与材料React表

kiayqfof 于 2024-01-05 发布在 Java

关注(0)|答案(1)|浏览(140)

我遵循官方的material-react-table文档如何创建一个CRUD表。参考链接在这里https://www.material-react-table.com/docs/examples/editing-crud。然而，我遇到了一个问题，当我试图使用我自己的自定义模态组件的“创建新”基本上我有一个自定义对话框，见下文。当我查看句柄创建函数中的值时，值为空除非我使用internalEditComponents。我如何在handle create函数中填充values props而不创建一堆自定义逻辑？
//创建函数

const handleCreate: MRT_TableOptions<any>['onCreatingRowSave'] = props => {
    const { values, table, row } = props;

    console.log('handleDomainCorrectionCreate', values); // this is empty

  };

字符串
//自定义对话框

renderCreateRowDialogContent: props => {
       const { table, row, internalEditComponents } = props;
      <DialogTitle>Add correction entry</DialogTitle>
          <DialogContent>
            <Box sx={{ my: 2 }}>
              <DialogContentText variant="subtitle2">From</DialogContentText>
              <TextField
                autoFocus
                id="error_name"
                label="Error Name"
                type="text"
                fullWidth
                variant="standard"
                name="error_name"
                onChange={event => setErrorName(event.target.value)}
                value={errorName}
              />
            </Box>
            <Box sx={{ my: 2 }}>
              <DialogContentText variant="subtitle2">To</DialogContentText>
              <TextField
                id="corrected_name"
                label="Corrected Name"
                type="text"
                fullWidth
                variant="standard"
                name="corrected_name"
                onChange={event => setCorrectedName(event.target.value)}
                value={correctedName}
              />
            </Box>
          </DialogContent>
          <DialogActions>
            <MRT_EditActionButtons variant="text" table={table} row={row} />
          </DialogActions>
}

型

JavaScript

来源：https://stackoverflow.com/questions/77642790/how-do-i-use-custom-edit-components-with-material-react-table

1条答案

按热度按时间

l3zydbqr1#

您可以从material-react-table V1 crud示例中获得帮助：

const columns = useMemo<MRT_ColumnDef<IPmsProgress>[]>(
      () => [
        {
          ...
      ],
      [ validationErrors],
    );    
    
    // use this state for insert values
    const [values, setValues] = useState<any>(() =>
      columns.reduce((acc, column) => {
        acc[column.accessorKey ?? ''] = '';
        return acc;
      }, {} as any),
    );

    const handleCreateNewRow: MRT_TableOptions<IPmsProgress>['onCreatingRowSave'] = ({
      table,
    }) => {        
      const newValidationErrors = validatePmsProgress(values);
      if (Object.values(newValidationErrors).some((error) => error)) {
        setValidationErrors(newValidationErrors);
        return;
      } 
      const request: IRequestPmsProgress = {
        contractid: currentContractId,
        dateid: currentReportDateId,
        item: values.item,
        lastplanprogress: values.lastplanprogress,
        lastplanvirtualprogress: values.lastplanvirtualprogress,
      }
      setValidationErrors({});
      addPmsProgress(request);
      table.setCreatingRow(null); //exit creating mode
    };
    
    ...
    const table = useMaterialReactTable({
      ...
      renderCreateRowDialogContent: ({ table, row }) => (  <>
          <DialogTitle variant="h6" fontFamily="sans serif" textAlign='center'>Add new item</DialogTitle>
          <DialogContent
            sx={{ display: 'flex', flexDirection: 'column', gap: '1rem' }}
          >
            <form onSubmit={(e) => e.preventDefault()}>
              <Stack
                sx={{
                  width: '100%',
                  minWidth: { xs: '300px', sm: '360px', md: '400px' },
                  gap: '1.5rem',
                }}
              >
                {columns.filter(column => 
                    column.accessorKey === 'item' ||
                    column.accessorKey === 'lastplanprogress' || 
                    column.accessorKey === 'lastplanvirtualprogress').map((column) => (
                  <TextField
                    key={column.accessorKey}
                    variant='filled'
                    label={column.header}
                    name={column.accessorKey}
                    type={column.accessorKey === 'item' ? 'text' : 'number'}
                    onChange={(e) =>
                      setValues({ ...values, [e.target.name]: e.target.value })
                    }
                  />
                ))}
              </Stack>
            </form>
          </DialogContent>
          <DialogActions sx={{ p: '1.25rem' }}>
            <MRT_EditActionButtons variant="text" table={table} row={row}/>
          </DialogActions>                
        </>
      ),
      ...
    })
    ...

字符串

赞(0）回复(0）举报 2024-01-05

我来回答

javascript 我如何使用自定义编辑组件与材料React表

1条答案

相关问题

热门标签

最新问答