amis2/examples/components/Sdk/Test.jsx

95 lines
1.9 KiB
React
Raw Normal View History

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',
body: [
2019-11-07 10:41:14 +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
{
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
{
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
}