86 lines
1.5 KiB
JavaScript
86 lines
1.5 KiB
JavaScript
|
/* eslint react/no-multi-comp:0, no-console:0 */
|
||
|
|
|
||
|
|
import { createForm } from '../index'
|
||
|
|
import { regionStyle } from './styles'
|
||
|
|
import { Switch } from 'antd'
|
||
|
|
|
||
|
|
const TopForm = {
|
||
|
|
props: {
|
||
|
|
form: Object,
|
||
|
|
},
|
||
|
|
render () {
|
||
|
|
const { getFieldProps } = this.form
|
||
|
|
return (<div style={ regionStyle }>
|
||
|
|
<div>has email? </div>
|
||
|
|
<div>
|
||
|
|
<Switch {...getFieldProps('on', {
|
||
|
|
initialValue: true,
|
||
|
|
valuePropName: 'checked',
|
||
|
|
})}
|
||
|
|
/>
|
||
|
|
</div>
|
||
|
|
</div>)
|
||
|
|
},
|
||
|
|
}
|
||
|
|
|
||
|
|
const BottomForm = {
|
||
|
|
props: {
|
||
|
|
form: Object,
|
||
|
|
on: Boolean,
|
||
|
|
},
|
||
|
|
render () {
|
||
|
|
const { form } = this
|
||
|
|
const on = form.getFieldValue('on')
|
||
|
|
const style = {
|
||
|
|
...regionStyle,
|
||
|
|
display: on ? 'block' : 'none',
|
||
|
|
}
|
||
|
|
return (<div style={ style }>
|
||
|
|
<div>email: </div>
|
||
|
|
<div>
|
||
|
|
<input {...form.getFieldProps('email', {
|
||
|
|
rules: [{
|
||
|
|
type: 'email',
|
||
|
|
}],
|
||
|
|
hidden: !on,
|
||
|
|
})}
|
||
|
|
/>
|
||
|
|
</div>
|
||
|
|
</div>)
|
||
|
|
},
|
||
|
|
}
|
||
|
|
|
||
|
|
const Form = {
|
||
|
|
props: {
|
||
|
|
form: Object,
|
||
|
|
},
|
||
|
|
methods: {
|
||
|
|
onSubmit (e) {
|
||
|
|
e.preventDefault()
|
||
|
|
console.log(this.form.getFieldsValue())
|
||
|
|
},
|
||
|
|
},
|
||
|
|
|
||
|
|
render () {
|
||
|
|
const { form } = this
|
||
|
|
return (<div>
|
||
|
|
<TopForm form={ form }/>
|
||
|
|
<BottomForm form={ form }/>
|
||
|
|
<div style={ regionStyle }>
|
||
|
|
<button onClick={this.onSubmit}>submit</button>
|
||
|
|
</div>
|
||
|
|
</div>)
|
||
|
|
},
|
||
|
|
}
|
||
|
|
|
||
|
|
const NewForm = createForm()(Form)
|
||
|
|
|
||
|
|
export default {
|
||
|
|
render () {
|
||
|
|
return (<div>
|
||
|
|
<h2>parallel form</h2>
|
||
|
|
<NewForm />
|
||
|
|
</div>)
|
||
|
|
},
|
||
|
|
}
|