Ant Design/React - 如何在列表中使用复选框？

Question

I'm new to React and Ant Design.

I want to use a List that has a Checkbox for each item. As in the attached example:

  <Checkbox indeterminate={indeterminate} onChange={onCheckAllChange} checked={checkAll}>
    Check all
  </Checkbox>
  <Divider />
  <List
    dataSource={plainOptions}
    renderItem={value => (
      <CheckboxGroup options={plainOptions} value={checkedList} onChange={onChange} />
    )}
  />

https://codepen.io/antoinemy/pen/dymvwJG

However I would simply like to replace the CheckboxGroup with a Checkbox but I can't do it through the List.

Can someone show me a solution and explain to me?

I would like to eventually produce other things through this list. I'm not interested in the CheckboxGroup, I really want the List to deploy my items.

Thank you, Antoine (FR)

Answer 1

I think you can include the Checkbox components inside the List.Item and wrap the Checkbox.Group outside

Here is my example code https://codesandbox.io/s/basic-list-antd-4-21-7-forked-h6fejs?file=/demo.js