如何在 reactjs 中手动编辑表格和表格标题的行

问：

我想实现行和列的动态表。

用户输入行和列并创建表格，最初我已将值设置为“输入文本”并且一切正常，现在我希望用户可以通过单击行或标题单元格上的值来手动编辑表格。

 <table id="mytable"   className="table table-striped table-nowrap dataTable" cellSpacing="0" width="100%">
                            <thead>
                            <tr>
                                {this.state.colarray.map((coldata,ind)=>{
                                    return(
                                        <th>{coldata}</th>
                                        )
                                })}
                            </tr>
                            </thead>
                             <tbody>
                             {console.log("rows",this.state.rowarray)}
                             {this.state.rowarray.map((rowdata,ind)=>{
                                 return(<tr>
                                     {this.state.colarray.map((col,index)=>{
                                         return(
                                                 <td>{rowdata['item'+index]}</td>
                                         )
                                     })}
                                 </tr>)

                             })}
                             </tbody>
                        </table>

用户如何通过在表格单元格和标题中手动输入数据来更改映射在表格上的数组数据。