lowcode-engine
lowcode-engine copied to clipboard
alibaba
高级表单中如何获取字段的值
Describe the bug (required) / 详细描述 bug（必填）
综合场景的demo中高级表单获取字段的值 A clear and concise description of what the bug is. / 请提供清晰且精确的 bug 描述
导入一下scheam
{
"version": "1.0.0",
"componentsMap": [
{
"package": "@alifd/fusion-ui",
"version": "1.0.5",
"exportName": "FormInput",
"main": "",
"destructuring": true,
"subName": "",
"componentName": "FormInput"
},
{
"package": "@alifd/fusion-ui",
"version": "1.0.5",
"exportName": "ProForm",
"main": "lib/index.js",
"destructuring": true,
"subName": "",
"componentName": "ProForm"
},
{
"package": "@alifd/next",
"version": "1.25.23",
"exportName": "Button",
"main": "",
"destructuring": true,
"subName": "",
"componentName": "Button"
},
{
"package": "@alifd/pro-layout",
"version": "1.0.1-beta.6",
"exportName": "P",
"main": "lib/index.js",
"destructuring": true,
"subName": "",
"componentName": "NextP"
},
{
"package": "@alifd/pro-layout",
"version": "1.0.1-beta.6",
"exportName": "Col",
"main": "lib/index.js",
"destructuring": true,
"subName": "",
"componentName": "NextCol"
},
{
"package": "@alifd/pro-layout",
"version": "1.0.1-beta.6",
"exportName": "Row",
"main": "lib/index.js",
"destructuring": true,
"subName": "",
"componentName": "NextRow"
},
{
"package": "@alifd/pro-layout",
"version": "1.0.1-beta.6",
"exportName": "RowColContainer",
"main": "lib/index.js",
"destructuring": true,
"subName": "",
"componentName": "NextRowColContainer"
},
{
"package": "@alifd/pro-layout",
"version": "1.0.1-beta.6",
"exportName": "BlockCell",
"main": "lib/index.js",
"destructuring": true,
"subName": "",
"componentName": "NextBlockCell"
},
{
"package": "@alifd/pro-layout",
"version": "1.0.1-beta.6",
"exportName": "Block",
"main": "lib/index.js",
"destructuring": true,
"subName": "",
"componentName": "NextBlock"
},
{
"package": "@alilc/lowcode-materials",
"version": "1.0.7",
"exportName": "NextText",
"main": "lib/index.js",
"destructuring": true,
"subName": "",
"componentName": "NextText"
},
{
"package": "@alifd/pro-layout",
"version": "1.0.1-beta.6",
"exportName": "PageHeader",
"main": "lib/index.js",
"destructuring": true,
"subName": "",
"componentName": "NextPageHeader"
},
{
"package": "@alifd/pro-layout",
"version": "1.0.1-beta.6",
"exportName": "Page",
"main": "lib/index.js",
"destructuring": true,
"componentName": "NextPage"
},
{
"devMode": "lowCode",
"componentName": "Page"
}
],
"componentsTree": [
{
"componentName": "Page",
"id": "node_dockcviv8fo1",
"props": {
"ref": "outerView",
"style": {
"height": "100%"
}
},
"docId": "doclaqkk3b9",
"fileName": "/",
"dataSource": {
"list": [
{
"type": "fetch",
"isInit": true,
"options": {
"params": {},
"method": "GET",
"isCors": true,
"timeout": 5000,
"headers": {},
"uri": "mock/info.json"
},
"id": "info",
"shouldFetch": {
"type": "JSFunction",
"value": "function() { \n console.log('should fetch.....');\n return true; \n}"
}
}
]
},
"state": {
"text": {
"type": "JSExpression",
"value": "\"outer\""
},
"isShowDialog": {
"type": "JSExpression",
"value": "false"
}
},
"css": "body {\n font-size: 12px;\n}\n\n.button {\n width: 100px;\n color: #ff00ff\n}",
"lifeCycles": {
"componentDidMount": {
"type": "JSFunction",
"value": "function componentDidMount() {\n console.log('did mount');\n}",
"source": "function componentDidMount() {\n console.log('did mount');\n}"
},
"componentWillUnmount": {
"type": "JSFunction",
"value": "function componentWillUnmount() {\n console.log('will unmount');\n}",
"source": "function componentWillUnmount() {\n console.log('will unmount');\n}"
}
},
"methods": {
"testFunc": {
"type": "JSFunction",
"value": "function testFunc() {\n console.log('test func');\n}",
"source": "function testFunc() {\n console.log('test func');\n}"
},
"onClick": {
"type": "JSFunction",
"value": "function onClick() {\n debugger;\n console.log(this.$(\"pro-form-entrylefc5k9d\").getFieldsValue());\n console.log(this.$('forminput-126aab5d').getValue());\n this.setState({\n isShowDialog: true\n });\n}",
"source": "function onClick() {\n debugger;\n console.log(this.$(\"pro-form-entrylefc5k9d\").getFieldsValue());\n console.log(this.$('forminput-126aab5d').getValue());\n this.setState({\n isShowDialog: true\n });\n}"
},
"closeDialog": {
"type": "JSFunction",
"value": "function closeDialog() {\n this.setState({\n isShowDialog: false\n });\n}",
"source": "function closeDialog() {\n this.setState({\n isShowDialog: false\n });\n}"
},
"getHelloWorldText": {
"type": "JSFunction",
"value": "function getHelloWorldText() {\n return this.i18n('i18n-jwg27yo4');\n}",
"source": "function getHelloWorldText() {\n return this.i18n('i18n-jwg27yo4');\n}"
},
"getHelloWorldText2": {
"type": "JSFunction",
"value": "function getHelloWorldText2() {\n return this.i18n('i18n-jwg27yo3', {\n name: '絮黎'\n });\n}",
"source": "function getHelloWorldText2() {\n return this.i18n('i18n-jwg27yo3', {\n name: '絮黎'\n });\n}"
},
"onTestConstantsButtonClicked": {
"type": "JSFunction",
"value": "function onTestConstantsButtonClicked() {\n console.log('constants.ConstantA:', this.constants.ConstantA);\n console.log('constants.ConstantB:', this.constants.ConstantB);\n}",
"source": "function onTestConstantsButtonClicked() {\n console.log('constants.ConstantA:', this.constants.ConstantA);\n console.log('constants.ConstantB:', this.constants.ConstantB);\n}"
},
"onTestUtilsButtonClicked": {
"type": "JSFunction",
"value": "function onTestUtilsButtonClicked() {\n this.utils.demoUtil('param1', 'param2');\n}",
"source": "function onTestUtilsButtonClicked() {\n this.utils.demoUtil('param1', 'param2');\n}"
},
"onClick_new": {
"type": "JSFunction",
"value": "function onClick_new() {\n debugger;\n}",
"source": "function onClick_new() {\n debugger;\n}"
},
"onChange": {
"type": "JSFunction",
"value": "function onChange(e, a, b) {\n debugger;\n}",
"source": "function onChange(e, a, b) {\n debugger;\n}"
}
},
"originCode": "class LowcodeComponent extends Component {\n state = {\n \"text\": \"outer\",\n \"isShowDialog\": false\n }\n componentDidMount() {\n console.log('did mount');\n }\n componentWillUnmount() {\n console.log('will unmount');\n }\n testFunc() {\n console.log('test func');\n }\n onClick() {\n debugger\n console.log(this.$(\"pro-form-entrylefc5k9d\").getFieldsValue())\n console.log(this.$('forminput-126aab5d').getValue())\n this.setState({\n isShowDialog: true\n });\n }\n closeDialog() {\n this.setState({\n isShowDialog: false\n });\n }\n getHelloWorldText() {\n return this.i18n('i18n-jwg27yo4');\n }\n getHelloWorldText2() {\n return this.i18n('i18n-jwg27yo3', {\n name: '絮黎',\n });\n }\n onTestConstantsButtonClicked() {\n console.log('constants.ConstantA:', this.constants.ConstantA);\n console.log('constants.ConstantB:', this.constants.ConstantB);\n\t}\n\tonTestUtilsButtonClicked(){\n this.utils.demoUtil('param1', 'param2');\n\t}\n\n\tonClick_new(){\n debugger\n\t}\n\n\tonChange(e, a, b){\n debugger\n\t}\n}",
"hidden": false,
"title": "",
"isLocked": false,
"condition": true,
"conditionGroup": "",
"children": [
{
"componentName": "NextPage",
"id": "node_ockzs2vw431",
"props": {
"headerDivider": true,
"minHeight": "100vh",
"presetNav": true,
"presetAside": true,
"footer": false,
"nav": false,
"aside": false,
"placeholderStyle": {
"gridRowEnd": "span 1",
"gridColumnEnd": "span 12"
},
"headerProps": {
"background": "surface"
},
"header": {
"type": "JSSlot",
"value": [
{
"componentName": "NextPageHeader",
"id": "node_ockzs2vw433",
"props": {},
"docId": "doclaqkk3b9",
"title": "页面头部",
"hidden": false,
"isLocked": false,
"condition": true,
"conditionGroup": "",
"children": [
{
"componentName": "NextRowColContainer",
"id": "node_ockzs2vw434",
"props": {
"rowGap": 20,
"colGap": 20
},
"docId": "doclaqkk3b9",
"title": "行列容器",
"hidden": false,
"isLocked": false,
"condition": true,
"conditionGroup": "",
"children": [
{
"componentName": "NextRow",
"id": "node_ockzs2vw435",
"props": {},
"docId": "doclaqkk3b9",
"title": "行",
"hidden": false,
"isLocked": false,
"condition": true,
"conditionGroup": "",
"children": [
{
"componentName": "NextCol",
"id": "node_ockzs2vw436",
"props": {
"colSpan": 1
},
"docId": "doclaqkk3b9",
"title": "列",
"hidden": false,
"isLocked": false,
"condition": true,
"conditionGroup": "",
"children": [
{
"componentName": "NextP",
"id": "node_ockzvfoetv17",
"props": {
"wrap": false,
"type": "body2",
"verAlign": "middle",
"textSpacing": true,
"align": "left"
},
"docId": "dockzvfoetv",
"title": "段落",
"hidden": false,
"isLocked": false,
"condition": true,
"conditionGroup": "",
"children": [
{
"componentName": "NextText",
"id": "node_ockzvfoetv18",
"props": {
"type": "h5",
"children": {
"type": "JSExpression",
"value": "this.state.info?.info",
"mock": "标题标题"
},
"mark": false,
"code": false,
"delete": false,
"underline": false,
"strong": false
},
"docId": "dockzvfoetv",
"hidden": false,
"title": "",
"isLocked": false,
"condition": true,
"conditionGroup": ""
}
]
}
]
}
]
}
]
}
]
}
]
},
"isTab": false,
"contentAlignCenter": false,
"contentProps": {
"style": {
"background": "rgba(255,255,255,0)"
}
},
"navProps": {
"width": 200
},
"asideProps": {
"width": 200
},
"background": "lining"
},
"docId": "doclaqkk3b9",
"title": "页面",
"hidden": false,
"isLocked": false,
"condition": true,
"conditionGroup": "",
"children": [
{
"componentName": "NextBlock",
"id": "node_oclefc5i0ij",
"props": {
"placeholderStyle": {
"height": "100%"
},
"noPadding": false,
"noBorder": false,
"title": "区域标题",
"rowGap": 20,
"colGap": 20,
"background": "surface",
"layoutmode": "O",
"strict": true,
"colSpan": 12,
"rowSpan": 1,
"mode": "transparent",
"childTotalColumns": 12
},
"title": "区域",
"hidden": false,
"isLocked": false,
"condition": true,
"conditionGroup": "",
"children": [
{
"componentName": "NextBlockCell",
"id": "node_oclefc5i0ik",
"props": {
"colSpan": 12,
"rowSpan": 1,
"mode": "procard",
"isAutoContainer": true,
"title": "区块标题1",
"hasDivider": true,
"loading": false,
"hasCollapse": false,
"text": true,
"operations": [],
"isFillContainer": true,
"ref": "nextblockcell-fa141845"
},
"hidden": false,
"title": "",
"isLocked": false,
"condition": true,
"conditionGroup": "",
"children": [
{
"componentName": "NextRowColContainer",
"id": "node_oclefc5i0il",
"props": {
"rowGap": 20,
"colGap": 20
},
"title": "行列容器",
"hidden": false,
"isLocked": false,
"condition": true,
"conditionGroup": "",
"children": [
{
"componentName": "NextRow",
"id": "node_oclefc5i0im",
"props": {},
"title": "行",
"hidden": false,
"isLocked": false,
"condition": true,
"conditionGroup": "",
"children": [
{
"componentName": "NextCol",
"id": "node_oclefc5i0in",
"props": {
"colSpan": 1
},
"title": "列",
"hidden": false,
"isLocked": false,
"condition": true,
"conditionGroup": "",
"children": [
{
"componentName": "NextP",
"id": "node_oclefc5i0io",
"props": {
"wrap": false,
"type": "body2",
"verAlign": "middle",
"textSpacing": true,
"align": "left",
"prefix": "",
"full": false,
"flex": false,
"ref": "nextp-840d41fd"
},
"title": "段落",
"hidden": false,
"isLocked": false,
"condition": true,
"conditionGroup": "",
"children": [
{
"componentName": "ProForm",
"id": "node_oclefc5i0ip",
"props": {
"placeholder": "请在右侧面板添加表单项+",
"placeholderStyle": {
"height": "38px",
"color": "#0088FF",
"background": "#d8d8d836",
"border": 0,
"gridArea": "span 4 / span 4"
},
"columns": 4,
"labelCol": {
"fixedSpan": 4
},
"labelAlign": "top",
"emptyContent": "添加表单项",
"ref": "pro-form-entrylefc5k9d",
"operations": [],
"labelTextAlign": "right",
"size": "medium",
"device": "desktop"
},
"docId": "doclefc5i0i",
"title": "高级表单",
"hidden": false,
"isLocked": false,
"condition": true,
"conditionGroup": "",
"children": [
{
"componentName": "FormInput",
"id": "node_oclenpg6bh2",
"props": {
"formItemProps": {
"primaryKey": "8501",
"label": "表单项",
"size": "medium",
"device": "desktop",
"fullWidth": true,
"required": false,
"labelTextAlign": "right"
},
"placeholder": "请输入",
"ref": "forminput-126aab5d",
"__events": {
"eventDataList": [],
"eventList": [
{
"name": "onPressEnter",
"disabled": false
},
{
"name": "onClear",
"disabled": false
},
{
"name": "onChange",
"disabled": true
},
{
"name": "onKeyDown",
"disabled": false
},
{
"name": "onFocus",
"disabled": false
},
{
"name": "onBlur",
"disabled": false
}
]
}
},
"hidden": false,
"title": "",
"isLocked": false,
"condition": true,
"conditionGroup": ""
},
{
"componentName": "FormInput",
"id": "node_oclenpg6bh3",
"props": {
"formItemProps": {
"primaryKey": "3574",
"label": "表单项",
"size": "medium",
"device": "desktop",
"fullWidth": true,
"required": false
},
"placeholder": "请输入",
"ref": "forminput-e0a5273b"
},
"hidden": false,
"title": "",
"isLocked": false,
"condition": true,
"conditionGroup": ""
},
{
"componentName": "FormInput",
"id": "node_oclenpg6bh4",
"props": {
"formItemProps": {
"primaryKey": "8924",
"label": "表单项",
"size": "medium",
"device": "desktop",
"fullWidth": true,
"required": false,
"labelTextAlign": "right"
},
"placeholder": "请输入"
},
"hidden": false,
"title": "",
"isLocked": false,
"condition": true,
"conditionGroup": ""
},
{
"componentName": "FormInput",
"id": "node_oclenpg6bh5",
"props": {
"formItemProps": {
"primaryKey": "7250",
"label": "表单项",
"size": "medium",
"device": "desktop",
"fullWidth": true,
"required": false
},
"placeholder": "请输入"
},
"hidden": false,
"title": "",
"isLocked": false,
"condition": true,
"conditionGroup": ""
},
{
"componentName": "FormInput",
"id": "node_oclenpg6bh6",
"props": {
"formItemProps": {
"primaryKey": "7939",
"label": "表单项",
"size": "medium",
"device": "desktop",
"fullWidth": true
},
"placeholder": "请输入"
},
"hidden": false,
"title": "",
"isLocked": false,
"condition": true,
"conditionGroup": ""
},
{
"componentName": "FormInput",
"id": "node_oclenpg6bh7",
"props": {
"formItemProps": {
"primaryKey": "3889",
"label": "表单项",
"size": "medium",
"device": "desktop",
"fullWidth": true,
"required": false,
"labelTextAlign": "right"
},
"placeholder": "请输入"
},
"hidden": false,
"title": "",
"isLocked": false,
"condition": true,
"conditionGroup": ""
},
{
"componentName": "FormInput",
"id": "node_oclenpg6bh8",
"props": {
"formItemProps": {
"primaryKey": "5877",
"label": "表单项",
"size": "medium",
"device": "desktop",
"fullWidth": true
},
"placeholder": "请输入"
},
"hidden": false,
"title": "",
"isLocked": false,
"condition": true,
"conditionGroup": ""
},
{
"componentName": "FormInput",
"id": "node_oclenpg6bh9",
"props": {
"formItemProps": {
"primaryKey": "5923",
"label": "表单项",
"size": "medium",
"device": "desktop",
"fullWidth": true
},
"placeholder": "请输入"
},
"hidden": false,
"title": "",
"isLocked": false,
"condition": true,
"conditionGroup": ""
}
]
},
{
"componentName": "Button",
"id": "node_oclenk5i0w16",
"props": {
"prefix": "next-",
"type": "primary",
"size": "medium",
"htmlType": "button",
"component": "button",
"children": "取消",
"iconSize": "xxs",
"loading": false,
"text": false,
"warning": false,
"disabled": false,
"ref": "button-935fa7bc",
"__events": {
"eventDataList": [
{
"type": "componentEvent",
"name": "onClick",
"relatedEventName": "onClick"
}
],
"eventList": [
{
"name": "onClick",
"description": "点击按钮的回调\n@param {Object} e Event Object",
"disabled": true
},
{
"name": "onMouseUp",
"disabled": false
}
]
},
"onClick": {
"type": "JSFunction",
"value": "function(){return this.onClick.apply(this,Array.prototype.slice.call(arguments).concat([])) }"
}
},
"hidden": false,
"title": "",
"isLocked": false,
"condition": true,
"conditionGroup": ""
}
]
}
]
}
]
}
]
}
]
}
]
}
]
}
]
}
],
"i18n": {
"zh-CN": {
"i18n-jwg27yo4": "你好 ",
"i18n-jwg27yo3": "{name} 博士"
},
"en-US": {
"i18n-jwg27yo4": "Hello ",
"i18n-jwg27yo3": "Doctor {name}"
}
}
}
To Reproduce (required) / 如何复现 bug？（必填，非常重要）
Steps to reproduce the behavior: / 详细复现步骤：
- 打开demo地址
https://lowcode-engine.cn/demo/demo-general/index.html导入schema - 开启F12调试模式
- 输入第一个字段值
- 点击取消按钮进入调试，this.$('forminput-126aab5d')无法获取value
中文版示例：
- 打开 demo；
- 点击标题；
- 在右侧修改标题内容为「修改后的标题」；
- 渲染画布标题组件没有更新显示为「修改后的标题」；
Expected behavior (required) / 预期行为（必填，非常重要）
A clear and concise description of what did you expect to happen. / 请清晰和精确的描述你预期的行为 可获取表单字段的值
Screenshots (optional) / bug 截图（可选）
Sceenshots for further information. (If applicable.) / 一些有用的截图将会帮助我们更好的明确以及定位问题
Environments (please complete the following information) (required): / 请提供如下信息（必填）
- AliLowCodeEngine version: [e.g. 1.1.2] / 低代码引擎版本
- AliLowCodeEngineExt version: [e.g. 1.0.0] / 低代码引擎扩展包版本
- Browser [e.g. chrome, safari] / 浏览器版本
- materials / plugins / tools / 其他物料 / 插件 / 工具链版本
(this information can be collected via the manual plugin / 版本信息可通过低代码用户手册插件收集)
Additional context (optional) / 更多额外信息（可选）
Any other context of the problem here. / 可以追加更多的额外信息，帮助定位问题
昨天我也遇到这个问题，今天找到方法了
方法一：
高级表单配置表单具体项的表单标识 比如表单字段A 配置标识testA
高级表单配置onChange事件，新建方法并绑定
onChangeForm(value){
console.log(value)
}
保存并渲染之后，再在input里输入，会自动执行绑定的onChange事件
里面的value 对象就是绑定的整个表单的所有信息，控制台能看到 {testA:'123'} 就能拿到具体的信息
方法二：
这种比较蠢，先给表单一个唯一标识，直接在需要使用数据的地方用document.getElementById('testA').value
因为没有引jQuery，所以直接用document的api
不知道还有没有更好的办法
理论上，目前引擎定义的获取指定组件的 API，只有 this.$(refId) 来获取组件的 ref，然后就是调用 ref 对应的方法了~
此例中，获取 ref 可以得到如下对象
BUT getValue / getValues 确实得不到值，应该是组件实现有点问题，ProForm 没开源，bugfix 优先级不高，emmm...
另外一个问题：
this.$() 应该要返回 ref，不过 Fusion 系的组件经过 ConfigProvider 的 HOC，只会拿到一个对象包含 getInstance() 方法，调用后才拿到真实的 ref，这个要修复下~
@liujuping
另外一个问题：
this.$() 应该要返回 ref，不过 Fusion 系的组件经过 ConfigProvider 的 HOC，只会拿到一个对象包含
getInstance()方法，调用后才拿到真实的 ref，这个要修复下~ @liujuping
@LeoYuan getInstance 是 Next 组件自己的行为，而不是引擎规范，我理解其实不应该加上这一层，而是用户自己调用。
我刚才试了下，this.$() 能拿到实例，但是 ProForm 没有实例方法让你获取 values，推荐使用方式是使用 ProForm 的 action 按钮直接提交；
另外 @LeoYuan ProFrom 开源了，可以看看代码 https://github.com/alibaba/lowcode-materials/blob/main/packages/fusion-ui/src/components/pro-form/layouts/pro-form/index.tsx
@LeoYuan getInstance 是 Next 组件自己的行为，而不是引擎规范，我理解其实不应该加上这一层，而是用户自己调用。
对，光弘你说的是对的，应该是 ConfigProvider HOC 需要正确返回被包装组件的 ref，引擎可以不做这层兼容~