Event binding doesn't work in kendo popup when react is upgraded to 17.0.1

user_8368823 0
Viewed 407

I recently upgraded the react and react-dom version of my application from 16.4.1 to 17.0.1. I have the following piece of code in which the function is not getting called when the button is clicked. The same function gets called when I do not transform the component into a kendo window through jquery. So please help me with what I am missing here.

You can find the stackblitz for the code here.

You can also find the code below

import React from "react";
import ReactDOM from "react-dom";
import $ from "jquery";
import "kendo-ui-core";

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      visible: true
    };
    this.toggleDialog = this.toggleDialog.bind(this);
  }

  toggleDialog() {
    console.log("hi");
  }

  render() {
    return (
      <div id="Notification-Popup">
        <button className="k-button" onClick={this.toggleDialog}>
          Open Window
        </button>
      </div>
    );
  }
  componentDidMount() {
    const popup = $("#Notification-Popup");
    popup.kendoWindow({
      actions: [],
      width: 450,
      height: 520,
      visible: true,
      modal: true,
      title: "Notification",
      resizable: false
    });
  }
}
$("body").append(
  '<div id="SubscriptionExpirationNotificationPopupContainer"></div>'
);
ReactDOM.render(
  <App />,
  document.getElementById("SubscriptionExpirationNotificationPopupContainer")
);
kendo-ui reactjs jquery
2 Answers

I solved it by changing the id of the div, I was binding in kendo popup.

The working code is as follows

import React from "react";
import ReactDOM from "react-dom";
import $ from "jquery";
import "kendo-ui-core";

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      visible: true
    };
    this.toggleDialog = this.toggleDialog.bind(this);
  }

  toggleDialog() {
    console.log("hi");
  }

  render() {
    return (
      <div id="Notification-Popup">
        <button className="k-button" onClick={this.toggleDialog}>
          Open Window
        </button>
      </div>
    );
  }
  componentDidMount() {

    //id of the div mounted
    const popup = $("#SubscriptionExpirationNotificationPopupContainer");
    popup.kendoWindow({
      actions: [],
      width: 450,
      height: 520,
      visible: true,
      modal: true,
      title: "Notification",
      resizable: false
    });
  }
}
$("body").append(
  '<div id="SubscriptionExpirationNotificationPopupContainer"></div>'
);
ReactDOM.render(
  <App />,
  document.getElementById("SubscriptionExpirationNotificationPopupContainer")
);
user_83688230

I recommend you use property binding using arrow functions instead of .bind(this)

class App extends React.Component {
   state = {
      visible: true
    };
      
  toggleDialog = () => {
    console.log("hi");
  }

  render() {
    return (
      <div id="Notification-Popup">
        <button className="k-button" onClick={this.toggleDialog}>
          Open Window
        </button>
      </div>
    );
  }
}

it is less code

user_56002060
Related