我想通过在反应中单击按钮通过映射在模式框中逐行显示我的 csv 数据

Question

我可以通过 table 读取 CSV 数据，我想通过反应中的 onClick 或 onDoubleClick 函数在模式框中按单行显示该数据。我不知道该怎么做。任何形式的帮助都将不胜感激。我是 reactjs 的新手

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>

我想要 header 并且 csv table 的单行通过单击按钮出现在模式框中。

Answer 1

您必须将 rowContents 存储到 this.state，然后当单击按钮时，使用 this.state.rowContents[i]

取回 rowData

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>
    }
}

我想通过在反应中单击按钮通过映射在模式框中逐行显示我的 csv 数据

I want to show my csv data row by row consequently in a modal box by clicking button through mapping in react

csv

modal-dialog

edit

reactjs