-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.js
60 lines (52 loc) · 1.29 KB
/
index.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
import { Form, FormItem, FormField } from '../src/index.js'
import { Model, Meta, Validator } from 'tyshemo'
import { useMemo, useCallback } from 'react'
import ReactDOM from 'react-dom'
class Student extends Model {
static std_name = new Meta({
label: 'Name',
default: '',
component: 'input',
required: true,
validators: [
Validator.required('name should not be empty'),
],
})
static std_age = new Meta({
label: 'Age',
default: 0,
component: ['input', { type: 'number' }],
required: true,
validators: [
Validator.required('age should not be empty'),
],
watch(e) {
console.log(e)
}
})
static std_no = new Meta({
label: 'No.',
default: '',
component: 'input',
})
}
function App() {
const std = useMemo(() => new Student())
const onSubmit = (e) => {
e.preventDefault()
console.log(std.toData())
}
return (
<Form model={std} component="form" onSubmit={onSubmit}>
<FormItem name="std_name" />
<FormItem name="std_age" />
<FormItem name="std_no" />
Only Fields:
<FormField name="std_name" />
<FormField name="std_age" />
<FormField name="std_no" />
<button>Submit</button>
</Form>
)
}
ReactDOM.render(<App />, document.querySelector('#app'))