pro-components
pro-components copied to clipboard
🧐[问题] @ant-design/pro-card 组件的 onChange 事件无法捕获到部分子组件的数据变更,比如下拉框ProFormSelect
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,否则不行