在Ant Design中处理动态字段的单选按钮,需要先定义一个状态用于存储该单选按钮被选中的值。然后在表单中渲染该单选按钮,指定该状态作为其value属性。最后,为单选按钮的onChange事件绑定一个处理函数,每次该单选按钮的选中状态发生改变时,将该状态更新为当前选中的值。
以下是一个示例代码:
import React, { useState } from 'react';
import { Form, Radio } from 'antd';
const DynamicFieldsForm = () => {
const [radioValue, setRadioValue] = useState('A');
const handleRadioChange = (event) => {
setRadioValue(event.target.value);
};
return (
Option A
Option B
Option C
);
};
export default DynamicFieldsForm;
在上面的代码中,我们定义了一个状态radioValue
,并在单选按钮组的value属性中将其传递。在handleRadioChange
函数中,我们通过调用setRadioValue
函数来更新该状态。最后,在Form.Item
组件中,我们使用
组件渲染单选按钮,并将value
和onChange
属性指定为对应的状态和处理函数。