函数类注册自定义组件dispatchEvent不能执行绑定的事件,class注册组件没有问题
- Dominant language
- TypeScript
- Stars
- 18.9k
- Forks
- 2.7k
- PR merge metrics
- No merged PRs in 30d
Description
#### 描述问题:dispatchEvent不能执行绑定的事件
请用一段清晰简洁的文字描述问题是什么... 注册vue自定义组件dispatchEvent不能执行绑定的事件
#### 截图或视频:
可以的话,尽可能提供截图或视频来补充描述你的问题...
#### 如何复现(请务必完整填写下面内容):
1. 你是如何使用 amis 的?
`sdk`、`npm` 或`其他`...
npm
2. amis 版本是什么?请先在最新 beta 版本测试问题是否存在
"amis": "3.4.3",
"amis-core": "3.4.3",
"amis-editor": "5.6.1",
"amis-editor-core": "5.6.1",
3. 粘贴有问题的完整 `amis schema` 代码:
```
code here...
const name = 'ElButton'
function fn(props: any, ref: any) {
let {$schema: data} = props;
let dom = React.useRef(null);
const handleClick = (nativeEvent: React.MouseEvent) => {
let {dispatchEvent} = props;
dispatchEvent(nativeEvent, {});
};
React.useEffect(function () {
let newProps: {
[index: string]: any;
} = {};
Object.keys(data).forEach(key => {
if (!key.startsWith('$')) {
if (key === 'componentType') {
newProps['type'] = data[key];
} else {
newProps[key] = data[key];
}
}
});
const app = createApp({
render: () => {
return h(
ElementPlus[name],
{
...newProps,
ref,
onclick: handleClick
},
newProps.label
);
}
});
app.mount(dom.current);
return () => app.unmount();
});
return React.createElement('div', {
ref: dom
});
}
Renderer({
test: new RegExp(`${name}`),
name: name
})(React.forwardRef(fn));
class FnPlugin extends BasePlugin {
// 关联渲染器名字
rendererName = name;
$schema = '/schemas/ActionSchema.json';
order = -400;
// 组件名称
name = name;
description =
'用来展示一个按钮,你可以配置不同的展示样式,配置不同的点击行为。';
docLink = '/amis/zh-CN/components/button';
tags = ['brick-ui'];
icon = 'fa fa-square';
pluginIcon = 'button-plugin';
panelTitle = name;
// 事件定义
events: RendererPluginEvent[] = [
{
eventName: 'click',
eventLabel: '点击',
description: '点击时触发',
defaultShow: true,
dataSchema: [
{
type: 'object',
properties: {
nativeEvent: {
type: 'object',
title: '鼠标事件对象'
}
}
}
]
},
{
eventName: 'mouseleave',
eventLabel: '鼠标移出',
description: '鼠标移出时触发',
dataSchema: [
{
type: 'object',
properties: {
nativeEvent: {
type: 'object',
title: '鼠标事件对象'
}
}
}
]
}
];
// 动作定义
actions: RendererPluginAction[] = [];
panelJustify = true;
// eslint-disable-next-line @typescript-eslint/no-unused-vars
panelBodyCreator = (context: BaseEventContext) => {
return getSchemaTpl('tabs', [
{
title: '属性',
body: config[name].attribute || [
getSchemaTpl('label', {
label: '按钮名称'
}),
{
type: 'input-text',
label: '字段名称',
name: 'name'
},
{
type: 'select',
label: '按钮类型',
name: 'componentType',
options: [
{
label: '默认',
value: 'primary'
},
{
label: '危险',
value: 'danger'
},
{
label: '警告',
value: 'warn'
},
{
label: '成功',
value: 'success'
},
{
label: '浅色',
value: 'default'
}
],
multiple: false,
selectFirst: false
},
{
type: 'input-text',
label: '按钮图标',
name: 'icon',
// 提示
labelRemark: {
icon: 'icon-close',
trigger: ['hover'],
className: 'Remark--warning',
title: '提示',
content:
'图标请从My Iconfont库中选择 部分图标需要加icon-前缀 如close -> icon-close'
}
}
]
},
{
title: '样式',
body: [
getSchemaTpl('buttonLevel', {
label: '高亮样式',
name: 'activeLevel',
visibleOn: 'data.active'
}),
getSchemaTpl('switch', {
name: 'block',
label: '块状显示'
}),
getSchemaTpl('size', {
label: '尺寸'
})
]
},
{
title: '事件',
className: 'p-none',
body:
!!context.schema.actionType ||
['submit', 'reset'].includes(context.schema.type)
? [
getSchemaTpl('eventControl', {
name: 'onEvent',
...getEventControlConfig(this.manager, context)
})
// getOldActionSchema(this.manager, context)
]
: [
getSchemaTpl('eventControl', {
name: 'onEvent',
...getEventControlConfig(this.manager, context)
})
]
}
]);
};
}
```
4. 操作步骤
请简单描述一下复现的操作步骤...
给按钮通过右侧面板绑定点击事件,点击按钮绑定的事件不执行
Contributor guide
No contributing guide indexed for this repository
Research direction
Start by tracing the custom renderer registered with Renderer and the FnPlugin event definitions, then follow how props.dispatchEvent is called from the onclick handler. Reproduce the click action using the provided component code and right-panel event binding; done means the configured click event executes for the function-registered component as it does for the class-registered component.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- react, typescript
- Domain
- frontend
- Issue type
- Bug
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Stale
- Clarity
- Needs clarification
- Newbie friendliness
- 25/100