mirror of
https://gitee.com/baidu/amis.git
synced 2024-12-05 21:39:53 +08:00
3.5 KiB
3.5 KiB
title | shortname |
---|---|
自定义组件 | dev |
自定义组件主要分两类。表单类和非表单类。
FormItem
即表单类,它主要用来扩充表单项。先看个例子。
import * as React from 'react';
import {FormItem} from 'amis';
import * as cx from 'classnames';
@FormItem({
type: 'custom-checkbox',
})
export default class CustomCheckbox extends React.PureComponent {
toggle = () => {
const {value, onChange} = this.props;
onChange(!value);
};
render() {
const {value} = this.props;
const checked = !!value;
return (
<div>
<a
className={cx('btn btn-default', {
'btn-success': checked,
})}
onClick={this.toggle}
>
{checked ? '已勾选' : '请勾选'}
</a>
<div className="inline m-l-xs">{checked ? '已勾选' : '请勾选'}</div>
</div>
);
}
}
有了这个代码后,页面配置 form 的 controls 里面就可以通过这样的配置启动了。
{
// 其他信息省略了。。
type: 'form',
controls: [
{
type: 'custom-checkbox',
name: '变量名',
label: '自定义组件。'
}
]
}
表单项开发主要关心两件事。
- 呈现当前值。如以上例子,勾选了则显示
已勾选
,否则显示请勾选
。 - 接收用户交互,修改表单项值。如以上例子,当用户点击按钮时,切换当前选中的值。
至于其他功能如:label/description 的展示、表单验证功能、表单布局(常规、左右或者内联)等等,只要是通过 FormItem 注册进去的都无需自己实现。
Renderer
非表单类的组件自定义,主要通过 Renderer
实现。在开始阅读之前,请先阅读 amis 工作原理。
import * as React from 'react';
import {Renderer} from 'amis';
@Renderer({
test: /(^|\/)my\-renderer$/,
})
class CustomRenderer extends React.Component {
render() {
const {tip, body, render} = this.props;
return (
<div>
<p>这是自定义组件:{tip}</p>
{body ? (
<div className="container">
{render('body', body, {
// 这里的信息会作为 props 传递给子组件,一般情况下都不需要这个
})}
</div>
) : null}
</div>
);
}
}
这里注册一个 React 组件,当节点的 path 信息是 my-renderer
结尾时,交给当前组件来完成渲染。
请注意 this.props
中的 render
方法,它用来实现容器功能,通过它可以让使用者动态的配置其他渲染模型。
工具
目前主要提供以下工具。
fetch
import {fetch} from 'amis/utils';
用来做 ajax 请求。参数说明
api
字符串或者 api 对象,如: {url: 'http://www.baidu.com', method: 'get'}, api 地址支持变量。data
数据体
返回一个 Promise。
如:
import {fetch} from 'amis/utils';
fetch('http://www.baidu.com/api/xxx?a=${a}&b=${b}', {
a: 'aa',
b: 'bb',
}).then(function(result) {
console.log(result);
});
filter
import {filter} from 'amis/utils';
主要用来做字符替换,如:
import {filter} from 'amis/utils';
filter('blabla?a={a}', {a: 123}); // => 'blabla?a=123'