React数据表组件，将单击的行的信息传递到模态中

Question

我正在用ReactJS制作一个离线PWA，并且我已经开始使用react数据表组件，到目前为止它非常棒。

我已经将表设置为具有onRowClicked函数，该函数在任何时候单击一行时都会被调用，到目前为止，我只让该函数在单击时打开一个模态，它确实有效。

我的问题是，我希望模态包含来自被单击行的行元素的信息。因此，基本上，如果我单击标题为"Hello There"(element.title(的第一行，我希望模态也包含该行的元素。

这段代码显示了我所拥有的一切，包括我如何将文档从PouchDB映射到elements对象，这就是通知数据表中的行的内容。

我需要做什么才能将单击行的信息传递到模态中？

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;

Answer 1

更改：

notebookEntryHandler = () => {
this.setState({notebookDisplayOpen: true});
}

至：

notebookEntryHandler = row => {
this.setState({notebookDisplayOpen: true});
}

row表示单击的行，您可以将其存储在状态中并在模态中使用。