2019-06-11 17:00:02 +08:00
|
|
|
import React from 'react';
|
2019-04-30 11:11:25 +08:00
|
|
|
import TitleBar from '../../../src/components/TitleBar';
|
|
|
|
import {render} from '../../../src/index';
|
|
|
|
|
|
|
|
export default class SdkTest extends React.Component {
|
2019-11-07 10:41:14 +08:00
|
|
|
state = {
|
|
|
|
data: {
|
|
|
|
name: 'Amis Renderer',
|
|
|
|
id: 1,
|
|
|
|
email: 'xxx@xxx.com'
|
|
|
|
}
|
|
|
|
};
|
2019-04-30 11:11:25 +08:00
|
|
|
|
2019-11-07 10:41:14 +08:00
|
|
|
renderForm() {
|
|
|
|
return render(
|
|
|
|
{
|
|
|
|
title: '',
|
|
|
|
type: 'form',
|
2021-06-07 10:09:55 +08:00
|
|
|
body: [
|
2019-11-07 10:41:14 +08:00
|
|
|
{
|
2021-06-07 10:09:55 +08:00
|
|
|
type: 'input-text',
|
2019-11-07 10:41:14 +08:00
|
|
|
name: 'name',
|
|
|
|
label: 'Name'
|
|
|
|
},
|
2019-04-30 11:11:25 +08:00
|
|
|
|
2019-11-07 10:41:14 +08:00
|
|
|
{
|
2021-06-07 10:09:55 +08:00
|
|
|
type: 'input-text',
|
2019-11-07 10:41:14 +08:00
|
|
|
name: 'id',
|
|
|
|
label: 'Id'
|
|
|
|
},
|
2019-04-30 11:11:25 +08:00
|
|
|
|
2019-11-07 10:41:14 +08:00
|
|
|
{
|
2021-06-07 10:09:55 +08:00
|
|
|
type: 'input-email',
|
2019-11-07 10:41:14 +08:00
|
|
|
name: 'email',
|
|
|
|
label: 'Email'
|
|
|
|
},
|
2019-04-30 11:11:25 +08:00
|
|
|
|
2019-11-07 10:41:14 +08:00
|
|
|
{
|
|
|
|
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({
|
2019-04-30 11:11:25 +08:00
|
|
|
data: {
|
2019-11-07 10:41:14 +08:00
|
|
|
...values,
|
|
|
|
lastModified: new Date()
|
2019-04-30 11:11:25 +08:00
|
|
|
}
|
2019-11-07 10:41:14 +08:00
|
|
|
});
|
2019-04-30 11:11:25 +08:00
|
|
|
|
2019-11-07 10:41:14 +08:00
|
|
|
console.log('Diff', diff);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
);
|
|
|
|
}
|
2019-04-30 11:11:25 +08:00
|
|
|
|
2019-11-07 10:41:14 +08:00
|
|
|
handleClick = () => {
|
|
|
|
this.setState({
|
|
|
|
data: {
|
|
|
|
name: 'Amis Renderer',
|
|
|
|
id: Math.round(Math.random() * 1000),
|
|
|
|
email: 'xxx@xxx.com'
|
|
|
|
}
|
|
|
|
});
|
|
|
|
};
|
2019-04-30 11:11:25 +08:00
|
|
|
|
2019-11-07 10:41:14 +08:00
|
|
|
render() {
|
|
|
|
return (
|
2020-07-29 20:25:04 +08:00
|
|
|
<div className="schema-wrapper">
|
2019-11-07 10:41:14 +08:00
|
|
|
<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>
|
|
|
|
);
|
|
|
|
}
|
2019-04-30 11:11:25 +08:00
|
|
|
}
|