mirror of
https://github.com/ant-design/ant-design.git
synced 2024-12-06 02:15:35 +08:00
ab92c934d5
prop should be `checked` instead of `value`
2.1 KiB
2.1 KiB
order | title | ||||
---|---|---|---|---|---|
13 |
|
zh-CN
根据不同情况执行不同的校验规则。
en-US
Perform different check rules according to different situations.
import { Form, Input, Button, Checkbox } from 'antd';
const FormItem = Form.Item;
const formItemLayout = {
labelCol: { span: 4 },
wrapperCol: { span: 8 },
};
const formTailLayout = {
labelCol: { span: 4 },
wrapperCol: { span: 8, offset: 4 },
};
class DynamicRule extends React.Component {
state = {
checkNick: false,
};
check = () => {
this.props.form.validateFields(
(err) => {
if (!err) {
console.info('success');
}
},
);
}
handleChange = (e) => {
this.setState({
checkNick: e.target.checked,
}, () => {
this.props.form.validateFields(['nickname'], { force: true });
});
}
render() {
const { getFieldDecorator } = this.props.form;
return (
<div>
<FormItem {...formItemLayout} label="Name">
{getFieldDecorator('username', {
rules: [{
required: true,
message: 'Please input your name',
}],
})(
<Input placeholder="Please input your name" />
)}
</FormItem>
<FormItem {...formItemLayout} label="Nickname">
{getFieldDecorator('nickname', {
rules: [{
required: this.state.checkNick,
message: 'Please input your nickname',
}],
})(
<Input placeholder="Please input your nickname" />
)}
</FormItem>
<FormItem {...formTailLayout}>
<Checkbox
checked={this.state.checkNick}
onChange={this.handleChange}
>
Nickname is required
</Checkbox>
</FormItem>
<FormItem {...formTailLayout}>
<Button type="primary" onClick={this.check}>
Check
</Button>
</FormItem>
</div>
);
}
}
const WrappedDynamicRule = Form.create()(DynamicRule);
ReactDOM.render(<WrappedDynamicRule />, mountNode);