第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

反應(yīng)數(shù)據(jù)表組件,將點擊行的信息傳遞到模態(tài)

反應(yīng)數(shù)據(jù)表組件,將點擊行的信息傳遞到模態(tài)

FFIVE 2022-06-05 10:30:41
我正在使用 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>        );    }}
查看完整描述

1 回答

?
慕森卡

TA貢獻1806條經(jīng)驗 獲得超8個贊

改變:


notebookEntryHandler = () => {

  this.setState({notebookDisplayOpen: true});

}

至:


notebookEntryHandler = row => {

  this.setState({notebookDisplayOpen: true});

}

row表示被點擊的行,你可以將其存儲在狀態(tài)中并在模態(tài)中使用。


查看完整回答
反對 回復(fù) 2022-06-05
  • 1 回答
  • 0 關(guān)注
  • 105 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯(lián)系客服咨詢優(yōu)惠詳情

幫助反饋 APP下載

慕課網(wǎng)APP
您的移動學(xué)習(xí)伙伴

公眾號

掃描二維碼
關(guān)注慕課網(wǎng)微信公眾號