Ant Design 是一个基于 React 的 UI 组件库,它提供了丰富的组件和样式来构建用户界面。在 Ant Design 中,动态表单与单选按钮可以使用 Form 组件和 Radio 组件来实现。
下面是一个示例,演示了如何使用 Ant Design 中的动态表单和单选按钮:
import React, { useState } from 'react';
import { Form, Radio, Button } from 'antd';
const DynamicForm = () => {
const [form] = Form.useForm();
const [radioValue, setRadioValue] = useState('');
const handleRadioChange = (e) => {
setRadioValue(e.target.value);
};
const handleSubmit = (values) => {
console.log('Form values:', values);
};
return (
Male
Female
{radioValue === 'male' && (
)}
{radioValue === 'female' && (
)}
);
};
export default DynamicForm;
在这个示例中,我们使用了 Form
组件来创建一个表单,使用 Radio
组件来创建单选按钮。表单的提交通过 onFinish
回调函数处理。单选按钮的变化通过 onChange
事件处理函数来更新 radioValue
状态。
根据选择的单选按钮值,我们动态渲染了不同的表单项。当选择了 "Male" 时,会显示一个年龄输入框,当选择了 "Female" 时,会显示一个职业输入框。
最后,我们使用 Button
组件来创建一个提交按钮,点击提交按钮会调用 handleSubmit
函数来处理表单的提交。在这个示例中,我们只是简单地将表单的值打印到控制台上。
以上就是使用 Ant Design 中的动态表单和单选按钮的解决方法,希望对你有帮助!