反应数据表组件，将点击行的信息传递到模态

Question

我正在使用 ReactJS 制作一个离线 PWA，并且我已经开始使用 react-data-table-component，到目前为止效果很好。我已将表格设置为具有在onRowClicked单击一行时调用的函数，到目前为止，我只有该函数在单击时打开一个确实有效的模式。我的问题是我希望模式包含来自被单击行的行元素的信息。所以基本上，如果我单击标题为“Hello There”（element.title）的第一行，我希望模态也包含该行的元素。这段代码显示了我所拥有的一切，包括我如何将我的文档从 PouchDB 映射到 elements object ，这就是我的数据表中的行的信息。我需要做什么才能将单击行的信息传递到模式中？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>                />            </Column>        );    }}

Answer 1

改变：

notebookEntryHandler = () => {

  this.setState({notebookDisplayOpen: true});

}

至：

notebookEntryHandler = row => {

  this.setState({notebookDisplayOpen: true});

}

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