在React中设置单选按钮的默认值可以通过两种方式实现。
defaultChecked
属性:在单选按钮的input
元素上添加defaultChecked
属性,并设置为true
或false
来指定默认选中状态。例如:<input type="radio" name="gender" value="male" defaultChecked={true} /> Male
<input type="radio" name="gender" value="female" defaultChecked={false} /> Female
checked
属性:通过在组件的状态中设置一个变量来控制单选按钮的选中状态,并在input
元素上使用checked
属性来绑定该状态变量。例如:class RadioButton extends React.Component {
constructor(props) {
super(props);
this.state = {
gender: 'male' // 默认选中的值
};
}
handleChange = (event) => {
this.setState({
gender: event.target.value
});
}
render() {
return (
<div>
<input type="radio" name="gender" value="male" checked={this.state.gender === 'male'} onChange={this.handleChange} /> Male
<input type="radio" name="gender" value="female" checked={this.state.gender === 'female'} onChange={this.handleChange} /> Female
</div>
);
}
}
以上两种方式都可以在React中设置单选按钮的默认值。根据具体需求选择适合的方式即可。
腾讯云相关产品和产品介绍链接地址:
领取专属 10元无门槛券
手把手带您无忧上云