lm-form/src/agreement.js

* 作者：liuduan * 邮箱：liuduan.05.05@163.com * 版本：**`1.0.2`**

import React from 'react';
import PropTypes from 'prop-types';
import './index.scss';

let uuid = 0;
let prefix = 'lm-agreement';

class Agreement extends React.Component {

    constructor(props) {
        super(props);
        this.state = {
            id: `${prefix}-input-${uuid}`
        };

        uuid++;
    }

    render() {
        const {
            className,
            children,
            checked,
            label,
            disabled,
            onChange
        } = this.props;

        return <div className={`${prefix}-container ${className}`}>

            <label className="left">
                <input
                    type="checkbox"
                    id={this.state.id}
                    disabled={disabled}
                    checked={checked}
                    onChange={(e) => onChange(e.target.checked)}
                />
                <div className="checkbox">
                    <i></i>
                </div>
            </label>

            <div className="right">
                <label htmlFor={this.state.id}>{label}</label>
                {children}
            </div>

        </div>
    }
};


Agreement.propTypes = {
    className: PropTypes.string,    // 自定义类名
    checked: PropTypes.bool,        // 是否选中，配合onChange使用
    label: PropTypes.oneOfType([
        PropTypes.string, PropTypes.element, PropTypes.number
    ]),                             // label
    disabled: PropTypes.bool,       // 禁用
    onChange: PropTypes.func,       // 回调
};

Agreement.defaultProps = {
    className: '',
    checked: false,
    disabled: false,
    label: '我已阅读并同意',
    onChange() { }
};

export default Agreement;