React data table 组件,将点击行的信息传递到模态
React data table component, passing info for clicked row into modal
我正在使用 ReactJS 制作一个离线 PWA,并且我已经开始使用 react-data-table-component,到目前为止效果很好。
我已经将 table 设置为具有一个 onRowClicked
函数,只要单击一行就会调用该函数,到目前为止,我只有该函数可以在单击时打开一个模式,这确实工作。
我的问题是我希望模式包含来自被单击行的行元素的信息。所以基本上,如果我单击标题为 "Hello There" (element.title) 的第一行,我希望模式也包含该行的元素。
这段代码显示了我所拥有的一切,包括我如何将我的文档从 PouchDB 映射到元素 object 中,这就是通知我的数据中的行的原因 table.
我需要做什么才能将点击行的信息传递到模式中?
import React, { useState,useMemo} from 'react';
import { Column, Row } from 'simple-flexbox';
import { StyleSheet, css } from 'aphrodite/no-important';
const columns = [
{
name: 'Title',
sortable: true,
cell: row => (<div>{row.title}</div>),
},
{
name: 'Date of Entry',
selector: 'createdAt',
sortable: true,
right: true,
},
];
class MedJournalComponent extends React.Component {
constructor(props){
super(props);
this.state = {
loading: true,
elements: null,
notebookDisplayOpen: false
};
this.fetchData.bind(this);
}
componentDidMount(){
this.fetchData();
}
fetchData = () => {
this.setState({
loading: true,
elements: null,
});
this.props.notes.db.allDocs({
include_docs: true,
}).then(result => {
const rows = result.rows;
this.setState({
loading:false,
elements: rows.map(row => row.doc),
});
}).catch((err) =>{
console.log(err);
});
}
notebookEntryHandler = () => {
this.setState({notebookDisplayOpen: true});
}
closeNotebookEntry = () => {
this.setState({notebookDisplayOpen: false});
}
render() {
const { notebookDisplayOpen } = this.state;
if (this.state.loading || this.state.elements === null) {
return `loading...`;
}
return (
<Column>
<Modal open={notebookDisplayOpen} onClose={this.closeNotebookEntry}>
<div>Test</div>
</Modal>
<DataTable
title="Notebook Entries"
columns={columns}
data={this.state.elements}
theme="solarized"
selectableRows
onRowClicked={this.notebookEntryHandler}
Clicked
Selected={handleChange}
/>
</Column>
);
}
}
export default MedJournalComponent;
变化:
notebookEntryHandler = () => {
this.setState({notebookDisplayOpen: true});
}
至:
notebookEntryHandler = row => {
this.setState({notebookDisplayOpen: true});
}
row
代表被点击的行,你可以把它存储在状态中,然后在模态中使用。
我正在使用 ReactJS 制作一个离线 PWA,并且我已经开始使用 react-data-table-component,到目前为止效果很好。
我已经将 table 设置为具有一个 onRowClicked
函数,只要单击一行就会调用该函数,到目前为止,我只有该函数可以在单击时打开一个模式,这确实工作。
我的问题是我希望模式包含来自被单击行的行元素的信息。所以基本上,如果我单击标题为 "Hello There" (element.title) 的第一行,我希望模式也包含该行的元素。
这段代码显示了我所拥有的一切,包括我如何将我的文档从 PouchDB 映射到元素 object 中,这就是通知我的数据中的行的原因 table.
我需要做什么才能将点击行的信息传递到模式中?
import React, { useState,useMemo} from 'react';
import { Column, Row } from 'simple-flexbox';
import { StyleSheet, css } from 'aphrodite/no-important';
const columns = [
{
name: 'Title',
sortable: true,
cell: row => (<div>{row.title}</div>),
},
{
name: 'Date of Entry',
selector: 'createdAt',
sortable: true,
right: true,
},
];
class MedJournalComponent extends React.Component {
constructor(props){
super(props);
this.state = {
loading: true,
elements: null,
notebookDisplayOpen: false
};
this.fetchData.bind(this);
}
componentDidMount(){
this.fetchData();
}
fetchData = () => {
this.setState({
loading: true,
elements: null,
});
this.props.notes.db.allDocs({
include_docs: true,
}).then(result => {
const rows = result.rows;
this.setState({
loading:false,
elements: rows.map(row => row.doc),
});
}).catch((err) =>{
console.log(err);
});
}
notebookEntryHandler = () => {
this.setState({notebookDisplayOpen: true});
}
closeNotebookEntry = () => {
this.setState({notebookDisplayOpen: false});
}
render() {
const { notebookDisplayOpen } = this.state;
if (this.state.loading || this.state.elements === null) {
return `loading...`;
}
return (
<Column>
<Modal open={notebookDisplayOpen} onClose={this.closeNotebookEntry}>
<div>Test</div>
</Modal>
<DataTable
title="Notebook Entries"
columns={columns}
data={this.state.elements}
theme="solarized"
selectableRows
onRowClicked={this.notebookEntryHandler}
Clicked
Selected={handleChange}
/>
</Column>
);
}
}
export default MedJournalComponent;
变化:
notebookEntryHandler = () => {
this.setState({notebookDisplayOpen: true});
}
至:
notebookEntryHandler = row => {
this.setState({notebookDisplayOpen: true});
}
row
代表被点击的行,你可以把它存储在状态中,然后在模态中使用。