/
demo6.js
99 lines (87 loc) · 2.01 KB
/
demo6.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
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
import React from 'react'
import { Input, Button, Field } from '@alicloud/console-components'
import { combineReducers, createStore } from 'redux'
import { Provider, connect } from 'react-redux'
function formReducer(state = { email: 'frankqian@qq.com' }, action) {
switch (action.type) {
case 'save_fields':
return {
...state,
...action.payload,
}
default:
return state
}
}
class Demo extends React.Component {
componentWillReceiveProps(nextProps) {
this.field.setValues({
email: nextProps.email,
newlen: nextProps.email.length,
})
}
field = new Field(this, {
onChange: (name, value) => {
console.log('onChange', name, value)
this.field.setValue('newlen', value.length)
this.props.dispatch({
type: 'save_fields',
payload: {
[name]: value,
},
})
},
})
setEmail() {
this.props.dispatch({
type: 'save_fields',
payload: {
email: 'qq@gmail.com',
},
})
}
render() {
const { init } = this.field
const newLen = init('newlen', { initValue: this.props.email.length })
return (
<div>
<Input
{...init(
'email',
{ initValue: this.props.email },
{
rules: [
{ required: true, type: 'email', message: 'at least 5 chars' },
],
}
)}
/>
now length is:{newLen.value}
<p>email: {this.props.email}</p>
<Button onClick={this.setEmail.bind(this)}>set</Button>
</div>
)
}
}
const ReduxDemo = connect(state => {
return {
email: state.formReducer.email,
}
})(Demo)
const store = createStore(
combineReducers({
formReducer,
})
)
const Demo6 = () => (
<Provider store={store}>
<div>
<ReduxDemo />
</div>
</Provider>
)
export const demoMeta = {
zhName: `redux 中使用`,
zhDesc: `在 \`redux\` 中使用, 在 \`componentWillReceiveProps\` 更新`,
}
export default Demo6