reactjs - React 单选按钮未得到检查,但功能正常
问题描述
我有以下具有两个单选按钮的反应组件。
export default class DemoApp extends Component {
constructor(props) {
super(props);
this.onThemeChange = ::this.onThemeChange;
this.state = {
theme: "dark"
};
}
onThemeChange(e) {
this.setState({
theme: e.target.value
});
}
render() {
return (
<Fragment>
<div className="radio">
<label htmlFor="light-theme">
<input
type="radio"
value="light"
onChange={this.onThemeChange}
checked={this.state.theme === "light"}
name="theme"
id="light-theme"
/>
light
</label>
</div>
<div className="radio">
<label htmlFor="dark-theme">
<input
type="radio"
value="dark"
name="theme"
checked={this.state.theme === "dark"}
onChange={this.onThemeChange}
id="dark-theme"
/>
Dark
</label>
</div>
</Fragment>
);
}
}
单选按钮在功能上工作正常。但是他们得到了检查,即只有默认的一个被检查,即使状态值发生变化,它仍然被检查。我也尝试过使用 defaultChecked 道具,但没有运气。
<div className="radio">
<label htmlFor="dark-theme">
<input
type="radio"
value="dark"
name="theme"
checked={this.state.theme === "dark"}
onChange={this.onThemeChange}
id="dark-theme"
/>
Dark
</label>
</div>
有人可以帮我找出我做错了什么吗?