baidu / baidu/amis

函数类注册自定义组件dispatchEvent不能执行绑定的事件,class注册组件没有问题

Open
#8,580 5 comments 0 reactions 0 assignees View on GitHub
doc need confirm
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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.