Reactjs 如何使物料界面表格行可编辑？

我已经创建了一个MaterialUI表，并从表中的数据库获取数据。我正在使用redux saga从数据库中获取数据。现在我想在单击特定行图标时编辑表行。 我希望用户点击铅笔/编辑图标来编辑表格行

import  * as React from 'react'
import {Table, TableHead, TableRow, TableCell, withStyles, TableBody} from '@material-ui/core'
import {EditOutlined} from '@material-ui/icons'
import {fetchRequest} from '../store/formData/action';
import {IDataPost} from '../store/formData/type'

import { ViewStyle } from './ViewStyle';

 interface IState{
     // id: string,
     loading: boolean,
     data: IDataPost[],
     errors: string | undefined,
     fetchRequest : typeof fetchRequest
 }
class View extends React.Component<IState>{
    state = {
  //      data: [],
        editIdx: false
    }


     componentDidMount(){
         const{data,fetchRequest}=this.props
            console.log("first fetch component did mount",data)
         if(data.length===0){
         fetchRequest();
         }
     }

     startEditing = (i:any) => {
         this.setState({ editIdx: true})
     }
     stopEditing = () => {
         this.setState({ editIdx: false})
     }
     public dataFetching(loading:boolean,data:IDataPost[]){
         const {classes}:any=this.props
          return(
              <div>
                  {console.log("loading",loading)}
                  {console.log("Data After Fetching",data)}
                  <Table className={classes.tableStyle}>
                      <TableHead className={classes.thead}>
                          <TableRow>
                              <TableCell className={classes.tcell}>ID</TableCell>
                              <TableCell className={classes.tcell}>Name</TableCell>
                              <TableCell className={classes.tcell}>Course</TableCell>
                              <TableCell className={classes.tcell}>Mobile Number</TableCell>
                              <TableCell className={classes.tcell}>Feedback</TableCell>
                              <TableCell className={classes.tcell}>Remark</TableCell>
                              <TableCell className={classes.tcell}>Date</TableCell>
                              <TableCell className={classes.tcell}>Edit</TableCell> 

                    </TableRow> 
                    </TableHead>   
                  {loading && data.length === 0}
                  {data.map((i:any) => (
                      <TableBody className={classes.tbody}>
                          <TableRow hover key={i.id} className={classes.tcell} selected={false} onClick={this.startEditing}>
                            <TableCell>{i.id}</TableCell>
                            <TableCell>{i.name}</TableCell>
                            <TableCell>{i.course}</TableCell>
                            <TableCell>{i.number}</TableCell>
                            <TableCell>{i.feedback}</TableCell>
                            <TableCell>{i.remark}</TableCell>
                            <TableCell>{i.dateofenquiry.substring(0,10)}</TableCell>
                            <TableCell><EditOutlined  color="primary"></EditOutlined></TableCell> 
                    </TableRow>
                    </TableBody>
               ))} </Table>

              </div>
          )
      }


    public render(){
         const {loading,data,errors}=this.props;
         console.log("errors",errors);
        return(
            <div  >
                <h1 style={{alignSelf:"normal"}}>Viser Technosys Tally Database</h1>


                 {this.dataFetching(loading,data)} 
            </div>
        )
    }
}

export default withStyles(ViewStyle)(View)

import*作为来自“React”的React
从“@material ui/core”导入{Table，TableHead，TableRow，TableCell，with styles，TableBody}
从“@material ui/icons”导入{EditOutlined}”
从“../store/formData/action”导入{fetchRequest}；
从“../store/formData/type”导入{IDataPost}
从“/ViewStyle”导入{ViewStyle}；
界面状态{
//id:string，
加载：布尔，
数据：IDataPost[]，
错误：字符串|未定义，
fetchRequest:fetchRequest的类型
}
类视图扩展了React.Component{
状态={
//数据：[]，
editIdx:false
}
componentDidMount（）{
const{data，fetchRequest}=this.props
log（“第一个提取组件没有装载”，数据）
if（data.length==0）{
fetchRequest（）；
}
}
startEditing=（i:any）=>{
this.setState（{editIdx:true}）
}
停止编辑=（）=>{
this.setState（{editIdx:false}）
}
公共数据获取（加载：布尔值，数据：IDataPost[]）{
const{classes}:any=this.props
返回(
{console.log（“加载”，加载）}
{console.log（“提取后的数据”，数据）}
身份证件
名称
课程
手机号码
反馈
评论
日期
编辑
{正在加载和&data.length==0}
{data.map（（i:any）=>(
{i.id}
{i.name}
{i.course}
{i.number}
{i.反馈}
{i.备注}
{i.dateofequiry.子串（0,10）}
))} 
)
}
公共渲染（）{
const{loading，data，errors}=this.props；
日志（“错误”，错误）；
返回(
Viser Technosys理货数据库
{this.dataFetching（加载，数据）}
)
}
}
导出默认样式（视图样式）（视图）

---

请朋友告诉我如何编辑和更新此表行？

我的建议是声明

EditIndex

状态变量， 在编辑时获取可编辑行的索引

单击编辑更新

EditIndex

变量， 基于

EditIndex

使用单元格和所需的表单标记呈现表行

希望它能起作用。多谢各位