Ant Design Mobile 性别选择组件示例 - 代码详解

以下是一个示例代码，演示了如何使用 ant-design-mobile 库中的性别选择组件：\n\njsx\nimport { List, Radio } from 'antd-mobile';\n\nconst GenderSelect = () => {\n const genderOptions = [\n { value: 'male', label: '男' },\n { value: 'female', label: '女' },\n { value: 'other', label: '其他' },\n ];\n\n const [selectedGender, setSelectedGender] = useState(null);\n\n const handleGenderChange = (value) => {\n setSelectedGender(value);\n };\n\n return (\n <List renderHeader={() => '性别'}>\n {genderOptions.map((option) => (\n <Radio.RadioItem\n key={option.value}\n checked={selectedGender === option.value}\n onChange={() => handleGenderChange(option.value)}\n >\n {option.label}\n </Radio.RadioItem>\n ))}\n </List>\n );\n};\n\nexport default GenderSelect;\n\n\n在上述代码中，我们首先导入了 ant-design-mobile 库的 List 和 Radio 组件。然后，我们定义了一个 GenderSelect 组件，它包含了一个性别选择的列表。\n\n在 GenderSelect 组件中，我们定义了一个 genderOptions 数组，其中包含了所有可选的性别选项。然后，我们使用 React 的 useState 钩子来跟踪当前选中的性别。\n\n在渲染部分，我们使用 List 组件来创建一个列表，并使用 genderOptions 数组来动态渲染 Radio.RadioItem 组件。我们使用 checked 属性来确定当前选项是否被选中，并使用 onChange 事件来在用户选择某个选项时更新 selectedGender 的状态。\n\n最后，我们将 GenderSelect 组件导出，以便在其他地方使用。你可以将此组件添加到你的应用程序中，并根据需要进行修改和定制。