react antd form.item 中有多個(gè)控件時(shí)解決方案

4.0之前

<Form {...formItemLayout}>
    <Form.Item label='準(zhǔn)確度'>
      <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);
    // 設(shè)置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);
    // 設(shè)置form.item值
    adjustHouseForm.setFieldsValue({ adjustDate: list });
  };
  return (
       <Form.Item label="入住日期及價(jià)格" 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>
  )
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時(shí)請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容