判断是否勾选了自定义无线组件
判断是否勾选了自定义无线组件
提问于 2021-03-10 01:51:09
我在React中有一个自定义单选组件，当我选中和取消选中这些值时，它会将项添加到对象中，并根据它们是否被选中来设置true或false。
目前，它正确地将true值与单选按钮的名称相加，但是如果选择了另一个选项，我似乎找不到如何将选项设为false。
我目前正在使用
constructor() {
super();
this.state = {
time_frame: {},
}
this.handleRadioChange = this.handleRadioChange.bind(this);
}
handleRadioChange(event) {
let name = event.target.name
let timeFrameCopy = this.state.time_frame;
console.log(event.target)
timeFrameCopy[event.target.value] = true
this.setState({[name]: timeFrameCopy,}, this.checkState)
return
}
}
checkState(event) {
console.log(this.state)
}我的无线电组件是
const Radio = (props) => {
return (
<Col>
<div>
<input id={props.value} type="radio" name={props.name} value={props.value} className="visually-hidden" onChange={props.handleChange}/>
<label htmlFor={props.value} className="switch-label checkbox-label text-center">{props.label}</label>
</div>
</Col>
)
}导出默认单选按钮
如果我选中一个单选按钮，然后选中另一个单选按钮，我的状态仍然包含数据：
time_frame: {single: true, recurring: true}即使我希望他们中的一个是假的
回答 1
Stack Overflow用户
回答已采纳
发布于 2021-03-10 02:32:31
如果我理解正确的话，您正试图在状态中存储一个名为time_frame的对象，该对象将在每个单选输入中包含一对属性值，其中每个属性值的名称将是属性名，而checked状态将是值。如果是这样的话，我看到了一个逻辑问题。因为您是硬编码true (根据我对您代码的理解)，而不是查找存储的值并对其进行切换/翻转。
handleRadioChange()函数应该类似于：
handleRadioChange(event) {
let name = event.target.name;
this.setState((currentState)=>{
let timeFrameCopy = currentState.time_frame;
timeFrameCopy[name] = event.target.checked;
return { "time_frame": timeFrameCopy };
});
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/66552220
复制相关文章
相似问题
腾讯云开发者
