本文实例为大家分享了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);
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。