/
demo4.js
78 lines (69 loc) · 1.48 KB
/
demo4.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
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
import React from 'react'
import { Input, Button, Field } from '@alicloud/console-components'
import styled from 'styled-components'
const Demo4 = () => {
const myField = Field.useField()
const { init, getError, setError, setErrors } = myField
return (
<SWrapper>
<Input
{...init('input', {
rules: [
{
required: true,
pattern: /hello/,
message: 'must be hello',
},
],
})}
/>
<br />
<span style={{ color: 'red' }}>{getError('input')}</span>
<br />
<Button
onClick={() => {
setError('input', 'set error 1')
}}
>
setError
</Button>
<Button
onClick={() => {
setErrors({ input: 'set error 2' })
}}
>
setErrors
</Button>
<Button
onClick={() => {
setErrors({ input: '' })
}}
>
clear
</Button>
<br />
<br />
<Input {...init('input2')} />
<br />
<span style={{ color: 'red' }}>{getError('input2')}</span>
<br />
<Button
onClick={() => {
setError('input2', 'errors will be removed by onChange')
}}
>
setError
</Button>
</SWrapper>
)
}
export default Demo4
export const demoMeta = {
zhName: `自定义错误`,
zhDesc: `自己控制组件的errors`,
}
const SWrapper = styled.div`
.next-btn {
margin-right: 8px;
}
`