Question

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

我将下面的部分代码粘贴到您的评估中：

<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>
    )
  }
}

下表：

visit url
fill_in the_form
click_on 'Create'
assert_selector '.post'
post = Post.first
img = page.find '.post .image'
assert_equal post.file.thumb.url, URI(img[:src]).path

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

Answer 1

我的第一个建议 - 不要这样做。可编辑的网格是非常难以实现的组件。

因此，您有一些选择可供选择：

将现有框架与可编辑网格结合使用：KendoUI，Wijmo等。虽然它们价格相当高，而且大部分都支持现在的反应。
有一些具有编辑功能的独立网格：ag-grid，react data grid等。其中一些是免费的，其他付费。
您可以根据强大的组件（如fixed-data-table，react-virtualized等开发自己的可编辑网格。此方法仍需要进行一些编码，但会节省大量时间。< / LI>
按照您现在的尝试制作自己的组件。

如果您仍然希望选择＃4，可以这样做：

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

4.2。在<td>代码上分配onClick处理程序：<td onClick={(ev) => this.onCellClick(ev))}>。在处理程序集editingColumn

4.3。在你的渲染替换

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

带

<td>{this.renderCell('columnName')}</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];
    }
}

这是非常粗略的描述，但我希望它能帮助你继续前进。

React make table可点击并编辑细节

1 个答案: