pro-components icon indicating copy to clipboard operation
pro-components copied to clipboard

🧐[问题] @ant-design/pro-card 组件的 onChange 事件无法捕获到部分子组件的数据变更,比如下拉框ProFormSelect

Open viper140 opened this issue 3 years ago • 0 comments
trafficstars

🧐 问题描述

我使用了 ProCard 组件(@ant-design/pro-card),发现其 onChange 事件无法捕获到很多子组件的数据变更事件,比如 ProFormSelect(下拉框)等

请问是设计如此还是我使用问题

💻 示例代码

<ProCard
                 collapsible
                 defaultCollapsed={false}
                 hoverable={true}
                 onChange={handleChange}
                 onCollapse={(collapse) => console.log("onCollapse: %s", collapse)}
        >
    // ERROR,无法触发ProCard.onChange
    <ProFormSelect label='xx' name='xx'  options={xxx}/>
    // 添加文件的时候可以触发,取消添加的时候不能触发
    <ProFormUploadButton label='yy' name='yy'/>
    // OK,可以触发ProCard.onChange
    <ProFormTextArea label='zz' name='zz'/>
</ProCard>

🚑 其他信息

又单独写了个demo:https://codesandbox.io/s/drawer-biao-dan-forked-7u3ovo?file=/index.tsx

  • 第一个下拉框:Error,不能监听到change事件
  • 第二个上传组件:添加文件的时候可以触发,取消添加的时候不能触发
  • 第三个文本组件:OK,可以监听到chagne事件

猜想

事实:

  • ProCard可以onChange到的组件:ProFormText ProFormTextArea ProFormDigit 等
  • ProCard不能onChange到的组件:ProFormSwitch ProFormRate ProFormDateTimePicker 等

猜想: 基于<input>封装的组件ok,否则不行

viper140 avatar Jul 31 '22 08:07 viper140