amis/examples/components/Sdk/Test.jsx
liaoxuezhi 65ac422ed6
1.2.x 文档&示例配置调整 (#2064)
* 补充容错

* fix: form 中 name 关联顶层数据初始化失效

* 更新 examples

* 文档调整

* 删除多余的文档, 调整 schema

* schema 调整

* schema 调整

* control 类型容器 control 改成 body

* 修复一个选项加载的bug

* form 注册直接用 type
2021-06-07 10:09:55 +08:00

95 lines
1.9 KiB
JavaScript

import React from 'react';
import TitleBar from '../../../src/components/TitleBar';
import {render} from '../../../src/index';
export default class SdkTest extends React.Component {
state = {
data: {
name: 'Amis Renderer',
id: 1,
email: 'xxx@xxx.com'
}
};
renderForm() {
return render(
{
title: '',
type: 'form',
body: [
{
type: 'input-text',
name: 'name',
label: 'Name'
},
{
type: 'input-text',
name: 'id',
label: 'Id'
},
{
type: 'input-email',
name: 'email',
label: 'Email'
},
{
type: 'static',
label: '最后更新时间',
name: 'lastModified'
}
]
},
{
data: this.state.data,
onFailed: (reason, errors) => {
console.log('Submit Failed', errors, '\n', reason);
},
onSubmit: values => {
console.log('Submit', values);
},
onChange: (values, diff) => {
this.setState({
data: {
...values,
lastModified: new Date()
}
});
console.log('Diff', diff);
}
}
);
}
handleClick = () => {
this.setState({
data: {
name: 'Amis Renderer',
id: Math.round(Math.random() * 1000),
email: 'xxx@xxx.com'
}
});
};
render() {
return (
<div className="schema-wrapper">
<TitleBar title="API 调用 集成在你的 React 应用中" />
<div className="wrapper">
{this.renderForm()}
<button onClick={this.handleClick}>随机修改</button>
<h3>当前值</h3>
<pre>
<code>{JSON.stringify(this.state.data, null, 2)}</code>
</pre>
</div>
</div>
);
}
}