joywok-material-components
Version:
<h1 align="center"> Joywok Material Components </h1>
76 lines (73 loc) • 2.2 kB
JavaScript
/**
*
* @api {} 组合Checkbox组件
* @apiName 选项组件
* @apiGroup 组件使用
*
* @apiParam {Array } value 当前选中的
* @apiParam {Array } options Checkbox组合[{key:"1",value:'1'}]
* @apiParam {function } onChange 页码发生变化之后的回调事件
*
* @apiSuccessExample {json} 使用案例:
import Checkbox from "joywok-material-components/lib/checkbox/normal";
<Checkbox value={["1","3"]} options={[{key:"1",value:'1'},{key:"2",value:'2'},{key:"3",value:'3'},{key:"4",value:'4'}]} onChange={(e)=>{console.log(e)}}></Checkbox>
*
*
*/
import React from 'react';
import { withStyles } from '@material-ui/core/styles';
import { makeStyles } from '@material-ui/core/styles';
import Checkbox from '@material-ui/core/Checkbox';
import FormGroup from '@material-ui/core/FormGroup';
import FormControlLabel from '@material-ui/core/FormControlLabel';
const styles = {
container: {
display: 'flex'
}
};
class CustomCheckbox extends React.Component {
constructor(props) {
super(props);
this.state = {
}
}
onChange(e,item){
let list = this.props.value;
let checked = event.target.checked;
if(checked){
list = [...new Set(list.concat(item.key))]
}else{
list = list.filter(function(i){return i!=item.key})
}
this.props.onChange && this.props.onChange(list);
}
render() {
console.log(this.props.options, 'xxx111111');
let self = this;
const { classes } = this.props;
this.props.className = classes.input+' jw-custom-checkbox ' + (this.props.className || '');
let value = this.props.value;
return (
<div className={'jw-custom-checkbox-w'}>
{
this.props.options.map(item=>(
<FormControlLabel className="jw-custom-checkbox-i"
control={
<Checkbox
checked={value.indexOf(item.key)!=-1?true:false}
value={item.key}
onChange={(e)=>this.onChange(e,item)}
disabled={this.props.disabled}
/>
}
label={item.value}
/>
))
}
</div>
);
}
componentDidMount(){
}
}
export default withStyles(styles)(CustomCheckbox);