145 lines
3.3 KiB
JavaScript
145 lines
3.3 KiB
JavaScript
/* eslint react/no-multi-comp:0, no-console:0 */
|
|
|
|
import { createForm } from '../index';
|
|
import { regionStyle, errorStyle } from './styles';
|
|
|
|
const Email = {
|
|
props: {
|
|
form: Object,
|
|
hidden: Boolean,
|
|
},
|
|
render() {
|
|
const { hidden, form } = this;
|
|
const { getFieldProps, getFieldError, isFieldValidating } = form;
|
|
const errors = getFieldError('email');
|
|
const style = {
|
|
...regionStyle,
|
|
display: hidden ? 'none' : '',
|
|
};
|
|
return (
|
|
<div style={style}>
|
|
<div>
|
|
email:
|
|
<input
|
|
{...getFieldProps('email', {
|
|
rules: [
|
|
{
|
|
required: true,
|
|
},
|
|
{
|
|
type: 'email',
|
|
message: '错误的 email 格式',
|
|
},
|
|
],
|
|
hidden,
|
|
})}
|
|
/>
|
|
</div>
|
|
|
|
{errors ? <div style={errorStyle}>{errors.join(',')}</div> : null}
|
|
|
|
{isFieldValidating('email') ? <div style={errorStyle}>validating</div> : null}
|
|
</div>
|
|
);
|
|
},
|
|
};
|
|
|
|
const User = {
|
|
props: {
|
|
form: Object,
|
|
},
|
|
render() {
|
|
const { getFieldProps, getFieldError, isFieldValidating } = this.form;
|
|
const errors = getFieldError('user');
|
|
return (
|
|
<div style={regionStyle}>
|
|
<div>
|
|
user:
|
|
<input
|
|
{...getFieldProps('user', {
|
|
initialValue: 'x',
|
|
rules: [
|
|
{
|
|
required: true,
|
|
},
|
|
],
|
|
})}
|
|
/>
|
|
</div>
|
|
{errors ? <div style={errorStyle}>{errors.join(',')}</div> : null}
|
|
|
|
{isFieldValidating('user') ? <div style={errorStyle}>validating</div> : null}
|
|
</div>
|
|
);
|
|
},
|
|
};
|
|
|
|
const Form = {
|
|
props: {
|
|
form: Object,
|
|
},
|
|
methods: {
|
|
onSubmit(e) {
|
|
e.preventDefault();
|
|
this.form.validateFields((error, values) => {
|
|
if (!error) {
|
|
console.log('ok', values);
|
|
} else {
|
|
console.log('error', error, values);
|
|
}
|
|
});
|
|
},
|
|
},
|
|
|
|
render() {
|
|
const { form } = this;
|
|
const { getFieldProps, getFieldValue } = form;
|
|
return (
|
|
<div style={{ margin: 20 }}>
|
|
<h2>overview</h2>
|
|
<form onSubmit={this.onSubmit}>
|
|
<div style={regionStyle}>
|
|
<div>
|
|
<label>
|
|
remove/add user:
|
|
<input
|
|
type="checkbox"
|
|
{...getFieldProps('remove_user', {
|
|
// initialValue:true,
|
|
valuePropName: 'checked',
|
|
})}
|
|
/>
|
|
</label>
|
|
</div>
|
|
</div>
|
|
|
|
{getFieldValue('remove_user') ? null : <User form={form} />}
|
|
|
|
<div style={regionStyle}>
|
|
<div>
|
|
<label>
|
|
hide/show email:
|
|
<input
|
|
type="checkbox"
|
|
{...getFieldProps('hide_email', {
|
|
// initialValue:true,
|
|
valuePropName: 'checked',
|
|
})}
|
|
/>
|
|
</label>
|
|
</div>
|
|
</div>
|
|
|
|
<Email form={form} hidden={!!getFieldValue('hide_email')} />
|
|
|
|
<div style={regionStyle}>
|
|
<button>submit</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
);
|
|
},
|
|
};
|
|
|
|
export default createForm()(Form);
|