Question

我已经创建了material-ui表并从表中的数据库中获取数据。我正在使用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)

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

Answer 1

我的建议是声明EditIndex状态变量，获取“编辑时可编辑行的索引”。

编辑更新EditIndex的OnClick变量，基于EditIndex带有单元格和所需表单标记的呈现表行。

希望它能起作用。谢谢

如何使Material-UI表行可编辑？

1 个答案: