홈>
세부 정보를 편집하고 업데이트하기 위해 테이블 행을 클릭 가능하게하려면 어떻게해야합니까? 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
관련 자료
- reactjs - 각 JSON 객체를 필터링하여 사용자 정의 가능한 React Table 생성
- javascript - 외부 라우팅 테이블 및 쿠키 기반 라우팅을 사용하는 React App
- node.js - React 테이블에 Mysql의 데이터를 표시하는 방법
- javascript - react js - 테이블의 각 셀에 대한 setstate
- reactjs - 두 개의 기본 키로 부트 스트랩 테이블 KeyField 반응
- html - 반응 가상화에서 테이블의 높이 속성을 비활성화하는 방법은 무엇입니까?
- reactjs - 반응 테이블 행을 연결할 수 없습니다
- reactjs - react 1686 + 반응 데이터 테이블 오류 typeerror - object (…)는 함수가 아닙니다
- 반응 테이블 7에 사용자 정의 정렬 기능을 어떻게 제공합니까?
- reactjs - Typescript를 사용하여 반응 앱에서 클릭시 다른 테이블 행을 추가하는 방법
- reactjs - 반응 - 구성 요소를 테이블의 로 사용
- javascript - URL에 연결된 클릭 가능한 표 행
- reactjs - React 테이블 리 렌더링 줄이기
- reactjs - antd 테이블 열의 ID로 React Router 를 사용하는 방법
- css - 반응 테이블 - 사용자가 제어 한 헤더 배경색
- reactjs - 버튼을 클릭하여 반응 테이블에 행 추가
트렌드
- OpenCv의 폴더에서 여러 이미지 읽기 (python)
- 파이썬 셀레늄 모든 "href"속성 가져 오기
- html - 자바 스크립트 - 클릭 후 변경 버튼 텍스트 변경
- javascript - 현재 URL에서 특정 div 만 새로 고침/새로 고침
- JSP에 대한 클래스를 컴파일 할 수 없습니다
- JavaScript 변수를 HTML div에 '출력'하는 방법
- git commit - 자식 - 로컬 커밋 된 파일에 대한 변경을 취소하는 방법
- jquery - JavaScript로 현재 세션 값을 얻으시겠습니까?
- javascript - swiperjs에서 정지, 재생 버튼 추가
- python - 화면에서 찾은 요소를 찾을 수없는 경우 셀레늄
첫 번째 제안-이러지 마십시오. 편집 가능한 그리드는 자체적으로 구현하기 매우 어려운 구성 요소입니다.
따라서 선택할 수있는 옵션이 있습니다 :
<올>편집 가능한 그리드 (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
다음과 같이 보일 것입니다 :이것은 매우 대략적인 설명이지만 계속 진행하는 데 도움이되기를 바랍니다.