react 自定义复选框组件

react 代码

效果图

使用CheckBoxGroup

import CheckBoxGroup from "./CheckBoxGroup";
<CheckBoxGroup  label="完税证明" list={wszmList}  className="marginB20"   onChange={this.wszmOnchange} //defaultValue={wszmxzbzList}  value={wszmxzbzList}  />

组件CheckBox

import React from "react";
import classNames from "classnames";
import { Icon } from "edf-component";
class CheckBox extends React.Component {
  constructor(props) {
    super(props);
    this.state = { checked: false };
  }
  componentDidMount = () => {
    this.setState({ checked: !!this.props.checked });
  };
  componentWillReceiveProps = (props) => {
    this.setState({ checked: !!props.checked });
  };
  change = (value) => {
    this.setState(
      {
        checked: !value,
      },
      () => {
        if (this.props.onChange) {
          this.props.onChange(!value, this.props.value);
        }
      }
    );
  };
  render() {
    const { checked } = this.state;
    let props = this.props;
    let className = classNames({
      "gs-checkbox-item": true,
      "gs-checkbox-item-select": checked,
      [props.className]: !!props.className,
    });
    return (
      <span
        className={className}
        onClick={() => {
          this.change(checked);
        }}
      >
        {props.label}
        <span className="gs-checkbox-item-bg">
          <Icon type="check" />{" "}
        </span>
      </span>
    );
  }
}

组件CheckBoxGroup

import React from "react";
import classNames from "classnames";
import CheckBox from "./CheckBox"
class CheckBoxGroup extends React.Component {
  constructor(props) {
    super(props);
    this.state = { label: "", list: [], values: [] };
  }
  componentDidMount = () => {
    this.setState({
      label: this.props.label,
      list: this.props.list,
      values: this.props.defaultValue || [],
    });
  };
  componentWillReceiveProps = (props) => {
    this.setState({ values: props.value || props.defaultValue || [] });
  };
  onChange = (checked, value) => {
    let { values } = this.state;

    if (checked) {
      values.push(value);
    } else {
      values.splice(values.indexOf(value), 1);
    }
    this.setState(
      {
        values: values,
      },
      () => {
        if (this.props.onChange) {
          this.props.onChange(values);
        }
      }
    );
  };
  render() {
    const { label, list } = this.props;
    const { values } = this.state;
    const props = this.props;
    let className = classNames({
      "gs-checkBoxGroup-row-block": true,
      [props.className]: !!props.className,
    });
    return (
      <div className={className}>
        <div className="gs-checkBoxGroup-row-label">{label}：</div>
        <div className="gs-checkBoxGroup-row-content">
          {list.map((item) => {
            return (
              <CheckBox
                label={item.name}
                value={item.id}
                checked={values.indexOf(item.id) > -1}
                onChange={(check, value) => this.onChange(check, value)}
                //className="marginR30"
              />
            );
          })}
        </div>
      </div>
    );
  }
}
export default CheckBoxGroup;

less 代码

checkBox组件

.gs-checkbox-item {
  position: relative;
  display: inline-block;
  padding: 0 15px;
  margin: 0 10px 5px;
  overflow: hidden;
  cursor: pointer;
  border: solid 1px transparent;
  &-select {
    border: solid 1px @primary-color;
    .gs-checkbox-item-bg {
      width: 20px;
      height: 20px;
      background: @primary-color;
      display: inline-flex;
      position: absolute;
      transform: rotate(45deg);
      bottom: -10px;
      right: -10px;
      .anticon {
        transform: rotate(-55deg);
        color: #fff;
      }
    }
  }
  &-bg {
    display: none;
  }
}

checkBoxGroup组件

.gs-checkBoxGroup {
  &-row {
    &-block {
      display: flex;
      overflow: hidden;
      line-height: 24px;
      vertical-align: middle;
    }
    &-label {
      display: flex;
      flex: 0 0 120px;
      justify-content: flex-end;
      font-size: 14px;
      font-weight: bold;
      width: 120px;
      text-align: right;
    }
    &-content {
      display: flex;
      flex: 1 1 auto;
      flex-wrap: wrap;
      .gs-checkbox-item {
        height: 24px;
      }
      .marginR30 {
        margin-right: 30px;
      }
    }
  }
}