Блог

Здравствуйте, я новичок в react JS. Я пытаюсь показать диаграмму для каждой выделенной строки таблицы react, импортированной из любого файла Excel. Диаграмма будет содержать значения из onclicked_row[2:len(строка)-12]. Этот код предназначен для App.js Длина таблицы меняется от excel к другому. Спасибо за помощь, она нужна мне для учебы.

 import React, { Component } from 'react';
import './App.css';
import {OutTable, ExcelRenderer} from 'react-excel-renderer';
import { Jumbotron, Col, Input, InputGroup, InputGroupAddon, FormGroup, Label, Button, Fade, 
FormFeedback, Container, Card } from 'reactstrap';

class App extends Component {
constructor(props){
super(props);
this.state={
  isOpen: false,
  dataLoaded: false,
  isFormInvalid: false,
  rows: null,
  cols: null
}
this.fileHandler = this.fileHandler.bind(this);
this.toggle = this.toggle.bind(this);
this.openFileBrowser = this.openFileBrowser.bind(this);
this.renderFile = this.renderFile.bind(this);
this.openNewPage = this.openNewPage.bind(this);
this.fileInput = React.createRef();
}


 renderFile = (fileObj) => {
  //just pass the fileObj as parameter
  ExcelRenderer(fileObj, (err, resp) => {
    if(err){
      console.log(err);            
    }
    else{
      this.setState({
        dataLoaded: true,
        cols: resp.cols,
        rows: resp.rows
      });
      console.log(this.state.cols)
    }
  }); 
 }

 fileHandler = (event) => {    
if(event.target.files.length){
  let fileObj = event.target.files[0];
  let fileName = fileObj.name;

  
  //check for file extension and pass only if it is .xlsx and display error message otherwise
  if(fileName.slice(fileName.lastIndexOf('.') 1) === "xlsx"){
    this.setState({
      uploadedFileName: fileName,
      isFormInvalid: false
    });
    this.renderFile(fileObj)
  }    
  else{
    this.setState({
      isFormInvalid: true,
      uploadedFileName: ""
    })
  }
}               
}

toggle() {
this.setState({
  isOpen: !this.state.isOpen
});
console.log("thisss")
}

openFileBrowser = () => {
this.fileInput.current.click();
}

openNewPage = (chosenItem) => {
const url = chosenItem === "github" ? "https://github.com/ashishd751/react-excel-renderer" : "https://medium.com/@ashishd751/render-and-display-excel-sheets-on-webpage-using-react-js-af785a5db6a7";
window.open(url, '_blank');
}

render() {
return (
  <div>
    <div>
      <Jumbotron className="jumbotron-background">          
      </Jumbotron>
    </div>
    <Container>
    <form>
      <FormGroup row>
        <Label for="exampleFile" xs={6} sm={4} lg={3} size="lg"  >Choisir excel à traiter</Label>          
        <Col xs={4} sm={8} lg={8}>                                                     
          <InputGroup>
            <InputGroupAddon addonType="prepend">
              <Button color="info" style={{color: "white", zIndex: 0}} onClick={this.openFileBrowser.bind(this)}><i className="cui-file"></i> Browseamp;hellip;</Button>
              <input type="file" hidden onChange={this.fileHandler.bind(this)} ref={this.fileInput} onClick={(event)=> { event.target.value = null }} style={{"padding":"10px"}} />                                
            </InputGroupAddon>
            <Input type="text" className="form-control" value={this.state.uploadedFileName} readOnly invalid={this.state.isFormInvalid} />                                              
            <FormFeedback>    
              <Fade in={this.state.isFormInvalid} tag="h6" style={{fontStyle: "italic"}}>
                Please select a .xlsx file only !
              </Fade>                                                                
            </FormFeedback>
          </InputGroup>     
        </Col>                                                   
      </FormGroup>   
    </form>

    {this.state.dataLoaded amp;amp; 
    <div>
      <Card body outline color="secondary" className="restrict-card"> 
        
          <OutTable data={this.state.rows} columns={this.state.cols} tableClassName="ExcelTable2007" tableHeaderRowClass="heading" />
           
      </Card>  
    </div>}
    </Container>
  </div>
);
 }
}

export default App;
 

это пример таблицы react