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

使用React材质表库，是否可以在添加新行时渲染自定义组件？我是（实际上是一个材质UI选择框）的预期结果列。当我添加新行时，我只看到需求列的字段，而不是预期结果列。是否也可以为新行的预期结果列添加输入

另一种选择是根本不使用自定义组件，而是使用类似的可编辑单元示例。然而，与直接使用选择字段相比，我不喜欢编辑预期结果所需的额外点击

从“物料表”导入物料表
从“@material ui/core”导入{MenuItem，选择}”
从“React”导入React，{useState}
从“不变性助手”导入更新
输入PassFailNA='Pass'|'Fail'|'N/A'
类型RowData={
要求D：编号，
requirementName:string，
预期结果：PassFailNA，
expectedResultId？：编号
}
导出功能ExpectedResultsTable（道具：{
场景ID：数字
}) {
const[tableData，setTableData]=useState（[{requirementId:1，requirementName:'hello'，expectedResult:'Pass'}]）
const{enqueueSnackbar}=useSnackbar（）
const handleSelect=（id:number）=>（事件：React.ChangeEvent）=>{
setTableData（（tableData:RowData[]）=>{
const rowNum=tableData.findIndex（x=>x.requirementId==id）
返回更新（tableData{
[rowNum]：{expectedResult:{$set:event.target.value}
})
})
}
返回(
(
通过
失败
不适用
)
}
]}
数据={tableData}
可编辑={{
onRowAdd:newRow=>
新承诺（（解决、拒绝）=>{
设置超时（（）=>{
setTableData（tableData=>update（tableData，{$push:[{……newRow，expectedResult:'N/A'}]}））
解决（）
}, 1000)
})
}}
/>
)
}

要实现所需功能，我认为在定义列时应该指定

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} />
      )
    }
  ];

const tableColumns=[
{标题：“客户”，字段：“id”}，
{标题：“名称”，字段：“名称”}，
{
标题：“布尔值”，
字段：“布尔值”，
编辑组件：（道具）=>{
控制台日志（道具）；
返回(
props.onChange（e.target.checked）}
/>
);
},
渲染：（行数据）=>(
)
}
];

---

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

要实现所需功能，我认为在定义列时应该指定

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} />
      )
    }
  ];

const tableColumns=[
{标题：“客户”，字段：“id”}，
{标题：“名称”，字段：“名称”}，
{
标题：“布尔值”，
字段：“布尔值”，
编辑组件：（道具）=>{
控制台日志（道具）；
返回(
props.onChange（e.target.checked）}
/>
);
},
渲染：（行数据）=>(
)
}
];

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