首页 > 解决方案 > wijmo react弹出组件中按钮元素的onClick callbak未在react / react-dom 17.02上调用,而是在react / dom-16.8.4上调用

问题描述

我正在使用葡萄城的 wijmo react 组件库版本 5.20211.794 和 React/React-Dom 版本 17.0.2 我试图在 Wijmo 输入弹出对话框窗口中添加一个自定义组件,但自定义组件的 onClick 处理程序从未被调用. 我发现 Wijmo Popup 中组件的任何处理程序都不会使用 react/react-dom 17.0.2 调用,但使用 react/react-dom 16.8.4 可以很好地调用

尝试遵循这个简单的代码,您会发现按钮单击仅适用于 16.8.4 我向葡萄城报告了这个问题,但我想知道这个问题是否有任何解决方法。

import * as React from 'react';
import * as wjInput from '@grapecity/wijmo.react.input';

import '@grapecity/wijmo.styles/wijmo.css';

function App ( props ) {


  const onInitialized = ( instance ) => {

    instance.show ( true );

  }

  return (
    
    <div className="container-fluid">
      <wjInput.Popup initialized={onInitialized}>
        <h4 className="modal-header">
          Test Popup
          <button type="button" onClick={()=>alert("Test")} >Test</button>
        </h4>
        <div className="modal-body">
          <h1>Hello, World</h1>
        </div>
        <div className="modal-footer">
          <button type="button" onClick={()=>alert("Ok")} >OK</button>
        </div>
      </wjInput.Popup>  
    </div>
  
  );

}

如果您想重现问题,请执行以下操作...您必须使用 react 17.0.2/react-dom 17.0.2

npx create-react-app popup-test 
npm install @grapecity/wijmo.react.all

将 App.js 替换为上面的代码,启动应用程序可以查看是否没有弹出点击按钮提示窗口,然后在项目根目录执行以下命令:

yarn add react@16.8.4
yarn add react-dom@16.8.4

停止反应应用程序并再次启动反应应用程序,刷新浏览器,现在,您可以看到按钮单击工作!

标签: javascriptreactjspopupwijmo

解决方案


推荐阅读