反应使表格可点击并编辑详细信息
问题描述:
如何使表格行可点击来编辑和更新详细信息?我从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>
)
}
}
我希望能够点击并编辑每一行。
答
我的第一个建议 - 不要这样做。可编辑的网格是非常棘手的组件,要自行实施。
因此,你有一些选项可以选择:
- 使用现有的框架与可编辑网格: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];
}
}
这是非常粗略的描述,但我希望这将有助于你得到持续。
您如何计划在编辑后保存每行的更改?无论如何,一种解决方案可能是在'DataRow'的'tr'上添加一个'onClick',然后使用[HTMLElement.contentEditable'](https:// developer)设置其子元素('td'元素)。 mozilla.org/en/docs/Web/API/HTMLElement/contentEditable) – glhrmv