Get Free Trial

reactjs problem with ref

Answered
Fernando Matté Fagundes asked on July 6, 2020

Hello.
 
I’m having problems when I change a field that together with the flexmonster component
 
For example:
When I type in the “Text to Example” field, the “ref” lose the reference and access to ef.current.flexmonster() generater an erro.
 
The example are atthached

import React from ‘react’;
import * as FlexmonsterReact from ‘react-flexmonster/hooks’;
import TextField from ‘@material-ui/core/TextField’;
import Button from ‘@material-ui/core/Button’;

function PivotTable(props) {

const ref = React.useRef();

const [text, setText] = React.useState(“”)

const handleChangeText = (event) => {
setText(event.target.value)
}

const handleGetReport = (event) => {
const reportDetails = ref.current.flexmonster().getReport()
console.log(reportDetails)
}

 

const onReportComplete = () => {
console.log(“>>>>”, ref.current.flexmonster(), ref.current.flexmonster().getReport());
}

return (<div>

<TextField
label=”Text To Example”
fullWidth
value={text}
onChange={handleChangeText}
InputLabelProps={{
shrink: true,
}}
/>

<FlexmonsterReact.Pivot
ref={ref}
toolbar={true}
width=”100%”
report=”https://cdn.flexmonster.com/reports/report.json”
reportcomplete={onReportComplete}
/>

<Button
variant=”contained”
color=”primary”
onClick={handleGetReport}
>
Execute get data

</Button>

</div>)
}

export default PivotTable;

 
 

4 answers

Public
Vera Didenko Vera Didenko Flexmonster July 7, 2020

Hello, Fernando,
 
Thank you for reaching out to us and for providing a code sample. 
 
For such cases, we kindly recommend using a React class component instead of a React Hook. 
Please see the following example of how Flexmonster is used as a class component.
 
We would like to mention that in case of a class component, the Flexmonster instance should be accessed the following way:

const reportDetails = ref.current.flexmonster.getReport();

 
 
Please let us know if this helps to resolve the problem.
Waiting for your feedback.
 
 
Kind regards, 
Vera

Public
Fernando Matté Fagundes July 7, 2020

Thank you Vera.
I try to use the code below, whatever I don’t know how is to link this “ref” to the component’s react  class. My questions is: Where do I get this “ref”? or How to do to create this ref?

const reportDetails = ref.current.flexmonster.getReport();

Here a example code for my question:
https://github.com/adsimbr/talento-javascript/blob/master/example.js
 
Best regards, 
Fernando

Public
Fernando Matté Fagundes July 7, 2020

Hi Vera, 
I did it, you have to use

this.refFlexmonster = React.createRef ();

With that, the component works correctly
working code example
https://github.com/adsimbr/talento-javascript/blob/master/example-2.js

Public
Vera Didenko Vera Didenko Flexmonster July 8, 2020

Hello, Fernando,
 
Thank you for the update and for sharing the result. 
 
We are glad to hear that using Flexmonster as a class component helped to resolve the issue.
 
If further questions arise, please feel free to reach out.
 
Kind regards, 
Vera

Please login or Register to Submit Answer