react antd form.item 中有多个控件时解决方案

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>
  )