4.0之前
<Form {...formItemLayout}>
<Form.Item label='准确度'>
<Form.Item style={{ display: 'inline-block', width: 'calc(50% - 5px)', marginRight: 8 }}>
{getFieldDecorator('accuracyMin', {
rules: [{required: true, message: 'Please input your username!'}],
})(
<Input
placeholder='最小范围值'
/>
)}
</Form.Item>
<Form.Item style={{ display: 'inline-block', width: 'calc(50% - 5px)'}}>
{getFieldDecorator('accuracyMax', {})(
<Input
placeholder='最大范围值'
/>
)}
</Form.Item>
</Form.Item>
4.0之后
const dateOptions = [
{ label: '2020-12-25', value: '2020-12-25' },
{ label: '2020-12-26', value: '2020-12-26' },
{ label: '2020-12-27', value: '2020-12-27' },
];
// 是否部分选中
const [indeterminate, setIndeterminate] = React.useState(false);
// 是否全选
const [checkAll, setCheckAll] = useState(false);
// 入住日期全选
const onCheckAllChange = (e) => {
setIndeterminate(false);
setCheckAll(e.target.checked);
// 设置form.item值
adjustHouseForm.setFieldsValue({ adjustDate: e.target.checked ? calendarPriceList.map((date) => (date.day)) : [] });
};
// 入住日期单选
const onChange = (list) => {
setCheckAll(list.length === calendarPriceList.length);
setIndeterminate(!!list.length && list.length < calendarPriceList.length);
// 设置form.item值
adjustHouseForm.setFieldsValue({ adjustDate: list });
};
return (
<Form.Item label="入住日期及价格" labelCol={{ span: 2 }} wrapperCol={{ span: 21 }}>
<Form.Item>
<Checkbox value={null} indeterminate={indeterminate} onChange={onCheckAllChange} checked={checkAll}>
全选
</Checkbox>
</Form.Item>
<Form.Item name="adjustDate">
<Checkbox.Group style={{ width: '100%' }} onChange={onChange}>
{renderCalendarPriceList()}
</Checkbox.Group>
</Form.Item>
</Form.Item>
)