记录一下react 全选功能

import React from 'react';
import { render } from 'react-dom';
import { Select, Checkbox,Row, Col } from 'antd'
import 'antd/dist/antd.css'

const data = [
{ id: 1, value: '1', text: '图片1' },
{ id: 2, value: '2', text: '图片2' },
{ id: 3, value: '3', text: '图片3' },
{ id: 4, value: '4', text: '图片4' },
{ id: 5, value: '5', text: '图片5' },
]
export default class App extends React.Component {
constructor(props) {
super(props)
this.state = { value: [], allChecked: false }
}
onChange(value) {
this.setState({ value, allChecked: value.length == data.length })
}
handleCheckAll(e) {
const checked = e.target.checked
this.setState({ allChecked: checked })
if (checked) {
this.setState({ value: data.map(item => item.value) })
} else {
this.setState({ value: [] })
}
}
render() {
return (<div>
<Checkbox onChange={::this.handleCheckAll} checked={this.state.allChecked}>全选</Checkbox>
<Checkbox.Group onChange={::this.onChange} value = { this.state.value } >
{
data.map(item => <div key={item.id}>
<span>{item.text}</span>
<Checkbox value={item.value}>{item.value}</Checkbox>
</div>)
}
</Checkbox.Group>
</div>)
}
}

render(<App />, document.getElementById('root'));