Question

我正在使用react和pouchdb并开始保存文档。我也在一张简单的桌子上检索文件。但我正在寻找在pouchdb中编辑和更新文档的最佳方法。

以下是我从表单中保存记录的代码：

submitInfo (event) {
    event.preventDefault()

    let schoolData = Object.assign({}, this.props.doc)

    if (!schoolData._id) {
      schoolData._id = schoolData.id
    }

    console.log('About to post to pouch...', schoolData._id)

    // Save to pouchdb
    this.regDb.put(schoolData, (err, result) => {
      if (!err) {
        console.log('Successfully posted to pouchdb!')
        this.props.clearDoc()
      } else {
        console.log('Error saving to pouch...')
        console.log(err)
      }
    })
  }

return (
      <div className='form'>
        <form action='' onSubmit={this.submitInfo}>
          <div className='form__container'>
          <RegistrationInfo {...doc.RegistrationInfo} />
          <button className='button expanded' type='submit'>Save</button>
          </div>
        </form>
      </div>
    )

以下是我检索文档的代码：

constructor (props) {
    super(props)
    this.state = {docs: []}
    this.regDb = this.props.regDb
  }

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

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

表格：

return (
      <div >
        <div >
        </div>
        <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) => <Data key={doc._id} doc={doc} {...this.props} />)}
            </tbody>
          </table>
        </div>
      </div>
    )

数据：

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

如何在桌面上编辑和更新文档？

Answer 1

如果没有redux和路由器，您可以在表格之前添加表单组件（您没有发布名称，因此我假设它名为return ( <div> <div> {this.state.editId && <YourFormComponent data={this.state.docs[this.state.editId]} /> </div> <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) => <Data key={doc._id} doc={doc} {...this.props} onEdit={() => this.setState({editId: doc._id})}/>)} </tbody> </table> </div> </div> )）：

this.props.data

在表单组件中，使用class Data extends React.Component { render () { let {doc, onEdit} = this.props return ( <tr> <td>{doc.RegistrationInfo['registrationtype']}</td> <td>{doc.RegistrationInfo['firstname']}</td> <td> {doc.RegistrationInfo['middlename']} <button onClick={onEdit}>Edit</button> </td> </tr> ) } }的值预填充输入字段。

在数据组件中，确保在单击编辑按钮时调用onEdit函数：

class ModelB():
    code = models.IntegerField(default=0)
    department = models.CharField(max_length=100)
    quantity = models.IntegerField(default=0)

    def update_quantity(self):
        #calculate sum of quantity from ModelA()
        sum_quantity = ModelA.objects.filter(
            department=self.department,
            code=self.code
        ).aggregate(
            quantity_sum=Sum(F('quantity'))
        )

        self.quantity = sum_quantity["quantity_sum"]
        self.save()

还要确保在submitInfo函数中将editId设置为undefined。

这段代码有点简单和脆弱（并没有遵循最佳实践），但您应该明白这一点：您需要一个按钮来编辑一行，一个响应的动作并将状态设置为doc._id单击编辑按钮时编辑，以及在设置id时呈现表单的组件。

希望有所帮助！

我想使用react和pouchdb编辑和更新文档

1 个答案: