用 getFieldDecorator 方法包裹的表单控件会自动添加 value (或由 valuePropName 指定的属性名) 和 onChange (或由 trigger 指定的属性名)属性, value 接收 form 传入的值, onChange 将控件的值回调到 form 中。 这两个属性是自动添加的,所以自定义控件不能有这两个属性。
借鉴:https://www.jianshu.com/p/2091e7a2c36a
import React, { PureComponent } from "react";
import { Checkbox } from "antd";
import styles from './index.module.less'
const CheckboxGroup = Checkbox.Group;
class CheckBox extends PureComponent {
constructor(props) {
super(props)
this.state = {
checkedList: props.value || [],
indeterminate: true,
checkAll: false,
}
}
// 改变选中
onCheckChange = checkedList => {
const { onChange, options } = this.props
this.setState({
checkedList,
indeterminate: !!checkedList.length && checkedList.length < options.length,
checkAll: checkedList.length === options.length,
})
onChange && onChange(checkedList)
};
// 选中全部
onCheckAllChange = e => {
const {options, onChange} = this.props
this.setState({
checkedList: e.target.checked ? options : [],
indeterminate: false,
checkAll: e.target.checked,
})
onChange && onChange(e.target.checked ? options : [])
}
render() {
const {
showAll,
options
} = this.props
return (
<div className={styles.checkBoxWrap}>
{
showAll &&
<Checkbox
indeterminate={this.state.indeterminate}
onChange={this.onCheckAllChange}
checked={this.state.checkAll}
>
全部
</Checkbox>
}
<CheckboxGroup
options={options || []}
onChange={this.onCheckChange}
value={this.state.checkedList}
/>
</div>
)
}
}
export default CheckBox;