Реагировать на компонент таблицы данных, передавая информацию о выбранной строке в модальный - PullRequest
Новая
       14

Реагировать на компонент таблицы данных, передавая информацию о выбранной строке в модальный

0 голосов
/ 28 марта 2020

Я делаю PWA в автономном режиме с ReactJS, и я начал использовать компонент response-data-table-component, который до сих пор был великолепен.

Я установил в таблице функцию 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;

1 Ответ

1 голос
/ 28 марта 2020

изменить: 

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

на: 

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

row представляет строку, по которой щелкнули, вы можете сохранить ее в состоянии и использовать в модальном режиме.

...