添加新行物料表时编辑自定义列组件答案

【问题标题】：Edit custom column component while adding new row of Material Table添加新行物料表时编辑自定义列组件
【发布时间】：2021-03-06 18:38:46
【问题描述】：

使用 React Material Table 库，是否可以在添加新行的同时渲染自定义组件？对于预期结果列，我是 using a custom component（实际上是一个 Material UI 选择框）。添加新行时，我只看到 Requirement 列的字段，而不是 Expected Result 列。是否也可以为新行的预期结果列添加输入？

另一种选择是根本不使用自定义组件，而是使用https://material-table.com/#/docs/features/editable 的单元格可编辑示例。但是，与直接使用选择字段相比，我不喜欢编辑预期结果所需的额外点击次数。

import MaterialTable from 'material-table'
import { MenuItem, Select } from '@material-ui/core'
import React, { useState } from 'react'
import update from 'immutability-helper'

type PassFailNA = 'Pass' | 'Fail' | 'N/A'

type RowData = {
    requirementId: number,
    requirementName: string,
    expectedResult: PassFailNA,
    expectedResultId?: number
}

export function ExpectedResultsTable(props: {
    scenarioId: number
}) {
    const [tableData, setTableData] = useState<RowData[]>([{ requirementId: 1, requirementName: 'hello', expectedResult: 'Pass' }])
    const { enqueueSnackbar } = useSnackbar()

    const handleSelect = (id: number) => (event: React.ChangeEvent<{ name?: string; value: any }>) => {
        setTableData((tableData: RowData[]) => {
            const rowNum = tableData.findIndex(x => x.requirementId === id)
            return update<RowData[]>(tableData, {
                [rowNum]: { expectedResult: { $set: event.target.value } }
            })
        })
    }

    return (
        <MaterialTable<RowData>
            title=""
            columns={[
                {
                    title: 'Requirement',
                    field: 'requirementName'
                },
                {
                    title: 'Expected Result',
                    field: 'expectedResult',
                    render: (rowData) => (
                        <Select value={rowData.expectedResult} onChange={handleSelect(rowData.requirementId)}>
                            <MenuItem value="Pass">Pass</MenuItem>
                            <MenuItem value="Fail">Fail</MenuItem>
                            <MenuItem value="N/A">N/A</MenuItem>
                        </Select>
                    )
                }
            ]}
            data={tableData}
            editable={{
                onRowAdd: newRow =>
                    new Promise((resolve, reject) => {
                        setTimeout(() => {
                            setTableData(tableData => update(tableData, { $push: [{ ...newRow, expectedResult: 'N/A'}] }))
                            resolve()
                        }, 1000)
                    })
            }}
        />
    )
}

【问题讨论】：

标签： reactjs material-table

【解决方案1】：

为了实现您要查找的内容，我认为您应该在定义列时指定 editComponent 属性（除了 render ）。该道具采用一个函数，您可以在其中定义在编辑或创建阶段使用的组件。

这是我使用布尔输入制作的示例：

  const tableColumns = [
    { title: "Client", field: "id" },
    { title: "Name", field: "name" },

    {
      title: "booleanValue",
      field: "booleanValue",
      editComponent: (props) => {
        console.log(props);
        return (
          <input
            type="checkbox"
            checked={props.value}
            onChange={(e) => props.onChange(e.target.checked)}
          />
        );
      },
      render: (rowdata) => (
        <input type="checkbox" checked={rowdata.booleanValue} />
      )
    }
  ];

链接到工作sandbox。我希望这对你有用！

【讨论】：