ant design Checkbox獲取當前點擊的數據

需求場景:多選框,底下的內容根據選擇的值來展示,選項值和內容對應

如: 選擇A,展示A的內容

    選擇B,展示B的內容

所以需要點擊選擇的時候,知道當前選中的是哪一項

這個是選擇組,一開始使用 了CheckboxGroup,但是這個onchange回調拿到的是選擇的全部數值,不能知道當前選中的數值

換成普通的 Checkbox

const FormDom = () => {
  const [selectdType, setSelectdType] = useState<any[]>([])

  // 選項變化
  const onChange = (e: any, type: string) => {
    let types = [...selectdType]
    const checked = e.target.checked
    if (checked) {
      if (!selectdType.includes(type)) {
        types.push(type)
      }
    } else {
      types = types.filter(item => item !== type)
    }
    setSelectdType(types)
    console.log(e, type, selectdType)
  }

  return (
    ...
    <Form.Item
      label="要素類型"
      name="issueElementTypes"
      rules={[{ required: true, message: '請選擇要素類型' }]}
    >
      // 將對應的value值傳遞出去,可以寫需要的值,如1,2,3等
      <Checkbox onChange={(e) =>onChange(e, 'a')}>a</Checkbox>
      <Checkbox onChange={(e) =>onChange(e, 'b')}>b</Checkbox>
      <Checkbox onChange={(e) =>onChange(e, 'c')}>c</Checkbox>
    </Form.Item>
    ...
    // 內容對應展示
    {selectdType.includes('a') ? <div>
      <h3>a的內容</h3>
    </div> : null}
    {selectdType.includes('b') ? <div>
      <h3>b的內容</h3>
    </div> : null}
    {selectdType.includes('c') ? <div>
      <h3>c的內容</h3>
    </div> : null}
  )

}

打印的內容