反应使表格可点击并编辑详细信息

如何使表格行可点击来编辑和更新详细信息？我从pouchdb中检索这些细节。反应使表格可点击并编辑详细信息

我对你们的评价粘贴下面我的代码部分：

this.state = {docs: []} 
this.db = this.props.db 

componentDidMount() { 
    this.updateDocs() 
    this.db.changes({ 
     since: 'now', 
     live: true 
    }).on('change', (change) => { 
     this.updateDocs() 
    }).on('error', (err) => { 
     console.error(err) 
    }) 
    } 

    updateDocs() { 
    this.db.allDocs({include_docs: true}).then((res) => { 
     var docs = res.rows.map((row) => row.doc) 
     this.setState({docs}) 
    }) 
    }

和下表：

<div className='table-list'> 
    <table> 
     <thead> 
     <tr> 
     <th>Registration Type</th> 
     <th>First Name</th> 
     <th>Middle Name</th> 
     </tr> 
     </thead> 

     <tbody> 
     {this.state.docs.map((doc) => <DataRow key={doc._id} doc={doc} {...this.props} />)} 
     </tbody> 
    </table> 
    </div> 

class DataRow extends React.Component { 
    render() { 
    let {doc} = this.props 

    return (
     <tr> 
     <td>{doc.RegistrationInfo['registrationtype']}</td> 
     <td>{doc.RegistrationInfo['firstname']}</td> 
     <td>{doc.RegistrationInfo['middlename']}</td> 
     </tr> 
    ) 
    } 
}

我希望能够点击并编辑每一行。

来源

2017-06-01 Israel Z Kollie

您如何计划在编辑后保存每行的更改？无论如何，一种解决方案可能是在'DataRow'的'tr'上添加一个'onClick'，然后使用[HTMLElement.contentEditable']（https：// developer）设置其子元素（'td'元素）。 mozilla.org/en/docs/Web/API/HTMLElement/contentEditable） – glhrmv

我的第一个建议 - 不要这样做。可编辑的网格是非常棘手的组件，要自行实施。

因此，你有一些选项可以选择：

使用现有的框架与可编辑网格：KendoUI，Wijmo，等等。虽然他们是有相当pricely，其中大部分有作为现在反应很单纯依靠。
有一些独立的网格与编辑功能：ag-grid,react data grid等，其中一些是免费的，其他支付。
您可以根据fixed-data-table，react-virtualized等强大组件开发自己的可编辑网格。此方法仍需要完成一些编码，但会为您节省大量时间。
现在制作你自己的组件。

如果你仍想一起去＃4你能做到这样：

4.1。在当前编辑的单元格的状态存储列中：editingColumn。

4.2。在您的<td>标签上分配onClick处理程序标签：<td onClick={(ev) => this.onCellClick(ev))}>。在处理器集editingColumn

4.3。在您的渲染

<td>{this.renderCell('columnName')}</td>更换

<td>{doc.RegistrationInfo['registrationtype']}</td>

。

而且renderCell会是这个样子：

private renderCell(colName) 
{ 
    if(this.state.editingColumn >= 0 && this.state.editingRow >= 0) 
    { 
     // Render your editing control here 
     // Assign to its 'onChange' like event and save changes to this.props.RegistrationInfo[colName]; 
    } 
    else 
    { 
     return this.props.RegistrationInfo[colName]; 
    } 
}

这是非常粗略的描述，但我希望这将有助于你得到持续。

来源

2017-06-01 12:04:07 Amid

反应使表格可点击并编辑详细信息

回答

相关问题