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

我正在使用 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>

        );

    }

}



FFIVE
浏览 71回答 1
1回答

慕森卡

改变:notebookEntryHandler = () => {&nbsp; this.setState({notebookDisplayOpen: true});}至:notebookEntryHandler = row => {&nbsp; this.setState({notebookDisplayOpen: true});}row表示被点击的行,你可以将其存储在状态中并在模态中使用。
打开App,查看更多内容
随时随地看视频慕课网APP

相关分类

JavaScript