作者热门文章
- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我想允许用户从复选框中选择一周中的几天。当选中某个复选框时,该复选框的值应更新 this.state.days。它不是添加到数组中,而是简单地覆盖 this.state.days。尝试使用简单的扩展运算符,但随后出现错误,表明 React 无法将 null 转换为对象 - 当我将天数设置为 [1,2] 时甚至会发生这种情况,以便它在开始时不是未定义的。请参阅下面的更改功能
this.state = {
days:[]
}
handleDaySelect (event) {
if (this.state.days) {
var dayArr = [...this.state.days]
} else {
var dayArr = [];
}
dayArr.push(event.target.value)
this.setState({
days: dayArr
})
}
渲染函数:
render() {
const daysOptions = ["Monday", "Tuesday", "Wednesday", "Thursday",
"Friday", "Saturday", "Sunday"].map((cur, ind) => {
return (
<div key={ind} className="checks" >
<label>
<input type="checkbox" name={cur} value={cur}
onChange={this.handleDaySelect} />{cur}
</label>
</div>
)
})
return (
<div id="newDeal" className="formContainer" >
<div className="checkBoxContainer" >
{daysOptions}
</div>
</div>
)
}
最佳答案
handleDaySelect(event){
let day_list = this.state.days;
let check = event.target.checked;
let checked_day = event.target.value;
if(check){
this.setState({
days: [...this.state.days, checked_day]
})
}else{
var index = day_list.indexOf(checked_day);
if (index > -1) {
day_list.splice(index, 1);
this.setState({
days: day_list
})
}
}
}
希望这有帮助。
关于arrays - 在状态 onChange 时将复选框值推送到数组,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/48814527/
我是一名优秀的程序员,十分优秀!