Using JqxWindow close() method inside button's onClick event handler gives Error

[vish05091980Participant]

Hi,
I am using the following:
1> jqwidgets-scripts 9.1.3 –> which has jqwidgets-react-tsx
2> React & React-DOM 16.12.0

I have this custom component written in React:
myCustomComponent.js:
================================

import React from ‘react’;

import ‘jqwidgets-scripts/jqwidgets/styles/jqx.base.css’;
import JqxWindow from ‘jqwidgets-scripts/jqwidgets-react-tsx/jqxwindow’;
import JqxButton from ‘jqwidgets-scripts/jqwidgets-react-tsx/jqxbuttons’;

class MyCustomComponent extends React.Component {

constructor(props) {
this.myWindowRef = React.createRef(); ===> I create a ref here in regular react way. Since my component is in “.js” can’t use generic type.
}

componentDidMount() {
this.myWindowRef.current.close() ===> Works fine without any error
}

render() {
return(
<div>
<JqxWindow ref= {this.myWindowRef} width={400} height={400} >

<div>
<JqxButton width={80}
onClick={() => this.myWindowRef.current.close()} ==> gives Error “Cannot read property ‘close’ of undefined
Close Window
</JqxButton
</div>

</JqxWindow>
</div>

);
}
}
export default MyCustomComponent;

Can you please answer the following:
=====================================
1> Why the this.myWindowRef.current.close() throws error when called from button’s onClick event handler?
2> Why the this.myWindowRef.current.close() works when called from componentDidMount? if it works in componentDidMount shouldn’t it also work via the button onClick event handler method?
3> What is the solution for my above setup/scenario. i.e. My component is written in “.js” and I am using jqwidgets-react-tsx compnents. Is there any in compatibility when using “tsx” components inside “.js” ?

Thanks
Vish

[adminKeymaster]

Hi

As far as I see the error states that this.myWindowRef.current is undefined. This means that it cannot be found in the event handler.

Regards,
Peter

[vish05091980Participant]

Here is what I tried and it worked.

componentDidMount method:
=========================
componentDidMount() {
this.savedWindowCurrentRef = this.myWindowRef.current ===> This is what I did here. Saving the this.myWindowRef.current upfront to be used later.
}

render method:
==============

render() {
return(
<div>
<JqxWindow ref= {this.myWindowRef} width={400} height={400} >
<div>
<JqxButton width={80}
onClick={() => this.savedWindowCurrentRef.close()} ==> This change works.
Close Window
</JqxButton>
</div>
</JqxWindow>
</div>
);
}

So is the above solution I tried correct? And do you think doing the above way will cause any issue in future or it should work fine?

Since I am attaching the “savedWindowCurrentRef” to the “this” I believe it should only be limited to current instance of my custom component within which the JqxWindow is encapsulated. Any new invocation of my custom component will have it’s own version of “savedWindowCurrentRef”. Do you agree to this?

Thanks
Vish

[Author]

Posts