>

세부 정보를 편집하고 업데이트하기 위해 테이블 ​​행을 클릭 가능하게하려면 어떻게해야합니까? 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>
    )
  }
}

각 행을 클릭하여 편집하고 싶습니다.

  • 답변 # 1

    첫 번째 제안-이러지 마십시오. 편집 가능한 그리드는 자체적으로 구현하기 매우 어려운 구성 요소입니다.

    따라서 선택할 수있는 옵션이 있습니다 :

    <올>

    편집 가능한 그리드 (KendoUI, Wijmo 등)와 함께 기존 프레임 워크를 사용하십시오. 비록 상당히 비싸고 대부분은 현재와 같이 반응에 대한 순수한 지원을 가지고 있습니다.

    편집 기능이있는 독립형 그리드가 있습니다 : ag-grid, 반응 데이터 그리드 등. 일부는 무료이며 다른 유료입니다.

    고정 데이터 테이블, 반응 가상화 등과 같은 강력한 구성 요소를 기반으로 자신 만의 편집 가능한 그리드를 개발할 수 있습니다.이 방법을 사용하려면 코딩이 약간 필요하지만 시간이 많이 절약됩니다.

  • 지금 시도하면서 나만의 구성 요소를 만드십시오.

    여전히 4 번을 가고 싶다면 다음과 같이하면됩니다 :

    4.1. 현재 편집 된 셀의 상태 저장소 열에서 : editingColumn .

    4.2. <td> 에 onClick 핸들러 할당  태그 : <td onClick={(ev) => this.onCellClick(ev))}> . 핸들러 세트 editingColumn 에서

    4.3. 렌더에서 교체

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

    with

    <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];
        }
    }
    
    

    이것은 매우 대략적인 설명이지만 계속 진행하는 데 도움이되기를 바랍니다.

  • 이전 javascript - 콜백이 많은 경우 비동기 함수에서 값을 올바르게 반환하는 방법
  • 다음 java - 돼지의 모든 n 개 행 값 합계