React AntD 单选框联动: 选中一个父单选框禁用另一个父单选框的子选项

可以通过使用 React 的状态管理来实现这个功能。首先，我们需要创建一个组件来表示父单选框和子单选框。\n\njsx\nimport React, { useState } from "react";\n\nconst ParentCheckbox = () => {\n const [isParentChecked, setIsParentChecked] = useState(false);\n\n const handleParentCheckboxChange = () => {\n setIsParentChecked(!isParentChecked);\n };\n\n return (\n <div>\n <label>\n <input\n type="checkbox"\n checked={isParentChecked}\n onChange={handleParentCheckboxChange}\n />\n Parent Checkbox\n </label>\n <br />\n <ChildCheckbox disabled={isParentChecked} />\n <ChildCheckbox disabled={isParentChecked} />\n <ChildCheckbox disabled={isParentChecked} />\n </div>\n );\n};\n\nconst ChildCheckbox = ({ disabled }) => {\n const [isChecked, setIsChecked] = useState(false);\n\n const handleChildCheckboxChange = () => {\n setIsChecked(!isChecked);\n };\n\n return (\n <label>\n <input\n type="checkbox"\n checked={isChecked}\n onChange={handleChildCheckboxChange}\n disabled={disabled}\n />\n Child Checkbox\n </label>\n );\n};\n\nexport default ParentCheckbox;\n\n\n在上面的代码中，我们使用了useState钩子来管理父单选框和子单选框的状态。当父单选框的状态改变时，我们通过setIsParentChecked更新状态，并将其传递到子单选框的disabled属性中。\n\n在父单选框组件中，我们创建了一个handleParentCheckboxChange函数来处理父单选框的状态改变。当父单选框被选中或取消选中时，我们通过setIsParentChecked方法将状态更新为相反的值。\n\n在子单选框组件中，我们使用了和父单选框相同的方式来管理子单选框的状态。子单选框的disabled属性根据父单选框的状态进行动态设置。\n\n这样，当选中其中一个父单选框时，另一个父单选框的子单选框将被禁用，并且每个父单选框默认选择第一个子单选框。