56 lines
1.1 KiB
JavaScript
56 lines
1.1 KiB
JavaScript
|
/* eslint react/no-multi-comp:0, no-console:0 */
|
||
|
|
|
||
|
|
import { createForm } from '../index'
|
||
|
|
|
||
|
|
const Form = {
|
||
|
|
props: {
|
||
|
|
form: Object,
|
||
|
|
},
|
||
|
|
|
||
|
|
beforeMount () {
|
||
|
|
this.nameDecorator = this.form.getFieldDecorator('name', {
|
||
|
|
initialValue: '',
|
||
|
|
rules: [{
|
||
|
|
required: true,
|
||
|
|
message: 'What\'s your name?',
|
||
|
|
}],
|
||
|
|
})
|
||
|
|
},
|
||
|
|
methods: {
|
||
|
|
onSubmit (e) {
|
||
|
|
e.preventDefault()
|
||
|
|
this.form.validateFields((error, values) => {
|
||
|
|
if (!error) {
|
||
|
|
console.log('ok', values)
|
||
|
|
} else {
|
||
|
|
console.log('error', error, values)
|
||
|
|
}
|
||
|
|
})
|
||
|
|
},
|
||
|
|
|
||
|
|
onChange (e) {
|
||
|
|
console.log(e.target.value)
|
||
|
|
},
|
||
|
|
},
|
||
|
|
|
||
|
|
render () {
|
||
|
|
const { getFieldError } = this.form
|
||
|
|
|
||
|
|
return (
|
||
|
|
<form onSubmit={this.onSubmit}>
|
||
|
|
{this.nameDecorator(
|
||
|
|
<input
|
||
|
|
onInput={this.onChange}
|
||
|
|
/>
|
||
|
|
)}
|
||
|
|
<div style={{ color: 'red' }}>
|
||
|
|
{(getFieldError('name') || []).join(', ')}
|
||
|
|
</div>
|
||
|
|
<button>Submit</button>
|
||
|
|
</form>
|
||
|
|
)
|
||
|
|
},
|
||
|
|
}
|
||
|
|
|
||
|
|
export default createForm()(Form)
|