jimu-mobile/src/components/form/radio.js

积木组件库助力移动端开发

/**
 * Created by yanshenshen on 17/11/16.
*/
import React from 'react';
import classNames from 'classnames';
import PropTypes from 'prop-types';

class Checkbox extends React.Component {
  static propTypes = {
    back: PropTypes.func,
    disabled: PropTypes.bool,
    defaultChecked: PropTypes.bool,
    label: PropTypes.string,
    isNull: PropTypes.bool,
  }
  static defaultProps = {
    back () { },
    disabled: false,
    defaultChecked: false,
    label: '',
    isNull: false,
  }

  constructor(props) {
    super(props);
    this.state = {
      defaultChecked: this.props.defaultChecked,
    };
    this.clicktaggle = this.clicktaggle.bind(this);
  }

  componentWillReceiveProps (nextProps) {
    if (nextProps.defaultChecked !== this.props.defaultChecked) {
      this.setState({
        defaultChecked: nextProps.defaultChecked,
      });
    }
  }

  clicktaggle () {
    console.log("----", this.state.defaultChecked);
    let { isNull, disabled } = this.props
    if (isNull && (disabled || this.state.defaultChecked)) {
      return;
    }
    this.setState({
      defaultChecked: !this.state.defaultChecked,
    });
    this.props.back && this.props.back(!this.state.defaultChecked);
  }

  render () {
    const { className, label, disabled } = this.props,
      { defaultChecked } = this.state;
    const cls = classNames({
      'jimu-form-radio': true,
      'jimu-radio-checked': defaultChecked,
      'jimu-radio-disabled': disabled,
      [className]: className,
    });

    return (
      <div className={cls} onClick={this.clicktaggle}>
        {!defaultChecked && <span className="icon-jimu-radio-normal" />}
        {defaultChecked && <span className="icon-jimu-radio" />}
        <label>{label}</label>
      </div>
    );
  }
}
export default Checkbox;