我正在使用 ReactJS 制作一個離線 PWA,并且我已經(jīng)開始使用 react-data-table-component,到目前為止效果很好。我已將表格設(shè)置為具有在onRowClicked單擊一行時調(diào)用的函數(shù),到目前為止,我只有該函數(shù)在單擊時打開一個確實有效的模式。我的問題是我希望模式包含來自被單擊行的行元素的信息。所以基本上,如果我單擊標(biāo)題為“Hello There”(element.title)的第一行,我希望模態(tài)也包含該行的元素。這段代碼顯示了我所擁有的一切,包括我如何將我的文檔從 PouchDB 映射到 elements object ,這就是我的數(shù)據(jù)表中的行的信息。我需要做什么才能將單擊行的信息傳遞到模式中?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> ); }}
反應(yīng)數(shù)據(jù)表組件,將點擊行的信息傳遞到模態(tài)
FFIVE
2022-06-05 10:30:41
