补充文档

This commit is contained in:
2betop 2021-08-25 12:07:06 +08:00
parent 23e7eaa197
commit 477a34a43f
2 changed files with 12 additions and 2 deletions

View File

@ -20,6 +20,7 @@ amis 的配置最终会转成 React 组件来执行,所以如果只是想在
},
{
"name": "mycustom",
"asFormItem": true,
"children": ({
value,
onChange,
@ -41,6 +42,9 @@ amis 的配置最终会转成 React 组件来执行,所以如果只是想在
其中的 `mycustom` 就是一个临时扩展,它的 `children` 属性是一个函数,它的返回内容和 React 的 Render 方法一样,即 jsx在这个方法里你可以写任意 JavaScript 来实现自己的定制需求,这个函数有两个参数 `value``onChange``value` 就是组件的值,`onChange` 方法用来改变这个值,比如上面的例子中,点击链接后就会修改 `mycustom` 为一个随机数,在提交表单的时候就变成了这个随机数,而 `data` 可以拿到其它控件的值,比如 `data.username`
> 注意与 "children" 并列有个 "asFormItem" 属性,这个属性表示这个节点的渲染会自动包裹成表单项,包裹成表单项就能配置
> "name"、"description"、"validation" 之类的跟表单项有关的配置了。包括其中的 value 和 onChange 自动会跟 name 关联等功能,跟下面 `@FormItem` 注解是一个功能。
与之类似的还有个 `component` 属性,这个属性可以传入 React Component如果想用 React Hooks请通过 `component` 传递,而不是 `children`
这种扩展方式既简单又灵活,但它是写在配置中的,无法在其他地方复用,也无法在可视化编辑器里编辑,如果需要复用或在可视化编辑器中使用,请使用下面的「注册自定义类型」方式:

View File

@ -71,6 +71,11 @@ export interface SubFormControlSchema extends FormBaseControl {
*/
btnLabel?: string;
/**
*
*/
addButtonText?: string;
/**
* CSS
*/
@ -339,7 +344,8 @@ export default class SubFormControl extends React.PureComponent<
draggableTip,
addable,
removable,
minLength
minLength,
addButtonText
} = this.props;
return (
@ -422,7 +428,7 @@ export default class SubFormControl extends React.PureComponent<
}
>
<Icon icon="plus" className="icon" />
<span>{__('SubForm.add')}</span>
<span>{__(addButtonText || 'SubForm.add')}</span>
</button>
) : null}