南强小屋 Design By 杰米
本文实例为大家分享了react实现复选框全选和反选组件的具体代码，供大家参考，具体内容如下
运行效果图如下：
代码：
import React, { Component } from 'react';
import { withRouter } from 'react-router-dom';
// import Menu from '../menu/Menu.jsx';
class List extends Component {
constructor () {
super();
this.state = {
title: '我是List的标题',
content: '我是内容部分部分',
chooseAll: false, // 全选标志
inters: ['bsball', 'ymball', 'fbball'], // 页面加载默认选中项
intersAll: ['bsball', 'ymball', 'ppball', 'fbball'],
fchoose: false // 正反选标志
};
}
// 全选
chooseAll (event) {
let {checked, value} = event.target;
let chooseAll = this.state.inters.length === 4 "list">
{/* <Menu /> */}
<h1>{this.state.title}</h1>
<p>{this.state.content}</p>
<p>
<label>
<input type="checkbox" value="bsball" checked={this.state.fchoose} onClick={this.fchooseHandle.bind(this)}/>{this.state.fchoose "checkbox" value="bsball" checked={this.state.chooseAll} onClick={this.chooseAll.bind(this)}/>{this.state.chooseAll "checkbox" value="bsball" checked={this.state.inters.includes('bsball')} onClick={this.chooseInter.bind(this)}/>篮球
</label>
<label>
<input type="checkbox" value="ymball" checked={this.state.inters.includes('ymball')} onClick={this.chooseInter.bind(this)}/>羽毛球
</label>
<label>
<input type="checkbox" value="ppball" checked={this.state.inters.includes('ppball')} onClick={this.chooseInter.bind(this)}/>兵乓球
</label>
<label>
<input type="checkbox" value="fbball" checked={this.state.inters.includes('fbball')} onClick={this.chooseInter.bind(this)}/>足球
</label>
</p>
</div>
);
}
}
export default withRouter(List);
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。
南强小屋 Design By 杰米
广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！ 如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com
免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！ 如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com
南强小屋 Design By 杰米
暂无react实现复选框全选和反选组件效果的评论...
RTX 5090要首发 性能要翻倍！三星展示GDDR7显存
三星在GTC上展示了专为下一代游戏GPU设计的GDDR7内存。
首次推出的GDDR7内存模块密度为16GB，每个模块容量为2GB。其速度预设为32 Gbps（PAM3），但也可以降至28 Gbps，以提高产量和初始阶段的整体性能和成本效益。
据三星表示，GDDR7内存的能效将提高20%，同时工作电压仅为1.1V，低于标准的1.2V。通过采用更新的封装材料和优化的电路设计，使得在高速运行时的发热量降低，GDDR7的热阻比GDDR6降低了70%。