在物料-界面中,RadioGroup是一种常用的选择组件,用于在多个选项中进行单选。要设置RadioGroup的默认选择,可以通过设置其value属性来实现。
首先,需要在RadioGroup组件中定义多个RadioButton子组件,每个RadioButton代表一个选项。然后,给每个RadioButton设置一个唯一的value值,表示该选项的取值。
接下来,通过设置RadioGroup的value属性,将默认选择的value值赋给它。这样,在页面加载时,RadioGroup就会自动选中对应value值的RadioButton。
以下是一个示例代码:
import { RadioGroup, RadioButton } from 'xxx'; // 导入RadioGroup和RadioButton组件
// 定义一个状态变量,用于保存RadioGroup的默认选择
const [defaultValue, setDefaultValue] = useState('option1');
// 设置RadioGroup的默认选择
const handleDefaultValueChange = (value) => {
setDefaultValue(value);
};
// 渲染RadioGroup组件
<RadioGroup value={defaultValue} onChange={handleDefaultValueChange}>
<RadioButton value="option1">选项1</RadioButton>
<RadioButton value="option2">选项2</RadioButton>
<RadioButton value="option3">选项3</RadioButton>
</RadioGroup>
在上述代码中,通过useState定义了一个名为defaultValue的状态变量,并将其初始值设置为'option1'。然后,在RadioGroup组件中,将defaultValue赋给value属性,表示默认选择为'option1'。当用户选择其他选项时,通过onChange事件更新defaultValue的值。
这样,RadioGroup的默认选择就被设置为'option1'了。
推荐的腾讯云相关产品:腾讯云云服务器(CVM) 腾讯云云服务器(CVM)是一种弹性计算服务,提供可靠、安全、灵活的云端计算能力。您可以根据业务需求选择不同配置的云服务器实例,并通过腾讯云控制台或API进行管理和操作。
产品介绍链接地址:腾讯云云服务器(CVM)
领取专属 10元无门槛券
手把手带您无忧上云