Я хочу, чтобы мои данные CSV строка за строкой, следовательно, в модальном поле, нажав кнопку через отображение в реагировать

Question

Я могу читать данные CSV через таблицу, и я хочу показать эти данные по отдельным строкам в модальном окне с помощью функции onClick или onDoubleClick в реакции. Я не могу понять, как это сделать. Любая помощь будет заметна. Я новичок в реагировании

render() {
        const {data, header} = this.props;
        const rows = [...data.split("\n")];
        const contentRows = header ? rows.slice(1,rows.length) : rows;

return (
            <div>
                 <Table>
                    {header && (
                        <TableHeader>
                            <TableRow>
                                {this.rowParser(rows[0]).map((value, index) => (
                                    <TableHeaderColumn key={index}>{value}</TableHeaderColumn>
                                ))}
                            </TableRow>
                        </TableHeader>
                    )}
            <TableBody displayRowCheckbox={false}>
                        {contentRows.map((row, index) => (

                            <TableRow key={index}>
                                {this.rowParser(row).map((value, index) => (
                                    <TableRowColumn key={index} data={value}>{value}
 </TableRowColumn>
                                ))}
                        <button type="button" id={index} onClick={this.handleClickOpen}>Edit</button>
                            </TableRow>

Я хочу, чтобы заголовок и отдельная строка таблицы CSV появлялись в модальном окне при нажатии кнопки.

Answer 1

Вы должны сохранить rowContents в this.state, затем, когда вы нажмете кнопку, получить обратно rowData, используя this.state.rowContents [i]

constructor(props) {
   super(props)
   const {data, header} = this.props;
   const rows = [...data.split("\n")];
   const contentRows = header ? rows.slice(1,rows.length) : rows;
   this.state = {
     header: header,
     contentRows: contentRows,
   }
}

componentDidMount() {

}

handleClickOpen(rowIndex) {
   // Do whatever you want with the row data
   const rowData = this.state.contentsRow[rowIndex]
   console.log(rowData)
}

render() {
   // other stuff here
   {
     contentRows.map((row, rowIndex) => (
       <TableRow key={rowIndex}> 
        {
          this.rowParser(row).map((value, colIndex) => ( 
            <TableRowColumn key={colIndex} data={value}>
              {value} 
            </TableRowColumn>
          ))
        }
        <button type="button" id ={rowIndex}
          onClick={() => this.handleClickOpen(rowIndex)}>
           Edit
         </button>
      </TableRow>
    }
}