ReactAntd(十九) React-包裹层与checkbox

表单包裹层

Form.Item 里面子元素只能是一层

• Space

<Form.Item label="爱好" name="checkboxall">
  <Space>
    <CheckboxGroup
      options={AllcheckData}
      value={checkedList}
      onChange={onChangeCheckBox}
    />
    <Checkbox
      indeterminate={indeterminate}
      onChange={onCheckAllChange}
      checked={CheckAll}
    >
      全选
    </Checkbox>
  </Space>
</Form.Item>

Checkbox

• 全选必须和 CheckBox 一起用才行否则状态不改变

function useCheckbox() {
  //checkbox 默认选中的
  const [checkedList, setcheckedList] = useState(['跑步'])
  //checkbox 全部数据
  const [AllcheckData, setAllcheckData] = useState(['跑步', '游泳', '射击'])
  //是否全部选中
  const [CheckAll, setCheckAll] = useState(false)
  // 全选会用到
  const [indeterminate, setindeterminate] = useState(true)
  //checkbox
  function onChangeCheckBox(checkedList) {
    setCheckAll(() => {
      return checkedList.length === AllcheckData.length
    })
    setcheckedList(checkedList)
    setindeterminate(() => {
      return !!checkedList.length && checkedList.length < AllcheckData.length
    })
  }
  //全选
  function onCheckAllChange(e) {
    console.log(e)
    setcheckedList(() => {
      if (e.target.checked) {
        return AllcheckData
      } else {
        return []
      }
    })
    setindeterminate(false)
    setCheckAll(() => {
      return e.target.checked
    })
  }

  return (
    <Form.Item label="爱好" name="checkboxall">
      <Space>
        <CheckboxGroup
          options={AllcheckData}
          value={checkedList}
          onChange={onChangeCheckBox}
        />
        <Checkbox
          indeterminate={indeterminate}
          onChange={onCheckAllChange}
          checked={CheckAll}
        >
          全选
        </Checkbox>
      </Space>
    </Form.Item>
  )
}