yylib-quick-mobile/dist/yylib/radio/YYRadioGroup.js

yylib-quick-mobile

import React from 'react';
import {List,Radio} from 'antd-mobile';
const RadioItem = Radio.RadioItem;
import classnames from 'classnames';
import {isFunction} from '../../utils/FunctionUtil';
import './YYRadioGroup.less';
class YYRadioGroup extends React.Component {
    state={
        value:this.props.value!==undefined?this.props.value:this.props.defaultValue
    }

    componentWillReceiveProps = (nextProps) => {
        if ('defaultValue' in nextProps) {
            if (this.props.defaultValue != nextProps.defaultValue) {
                this.setState({value: nextProps.defaultValue});
            }
        }
        //value优先级高于defaultValue
        if ('value' in nextProps) {
            if (this.props.value != nextProps.value) {
                this.setState({value: nextProps.value});
            }
        }
    }

    _onChange = ({value,i}, event) => {
			  let valueObject = i; 
        let {disabled,field} = this.props;
        let {getFieldProps} = this.props.form;
        if (event && event.target) {
            // 赋值value，以在表单里统一通过value取值处理
            event.target.value = event.target.checked;
            if (disabled) {
              valueObject = getFieldProps(field).value;
            }
        }
        this.setState({value:valueObject.value},()=>{
            //为了在外部表单中获取到
            let fields = {};
            fields[this.props.field] = {
                name: this.props.field,
                value: valueObject
            }
            this.props.form.setFields(fields);
            if (isFunction(this.props.onChange)) {
                this.props.onChange(value,i);
            }
        });

    }
    render() {
        let {getFieldProps} = this.props.form;
        const {RunInDesign,field, label, options,required,visible,disabled,...restProps} = this.props;
        let wrapClz = classnames('yy-radio-group', (!visible&&'hidden'),(required&&'label-required'),this.props.className);
        let {value} = this.state;
			  let valueObject = getFieldProps(field).value&&getFieldProps(field).value.value;
        let optionsDesign = [{label:'a',value:'a',checked:true},{label:'b',value:'b',checked:false},{label:'c',value:'c',checked:false}]
        let requiredMsg = '必选项' + label + '必选';
        return (
            <List {...restProps}
                  className={wrapClz}
                  {...isFunction(getFieldProps) ? getFieldProps(field, {
                      initialValue: value,
                      valuePropName: 'value',
                      rules: [
                        {required, message: requiredMsg},
                      ],
                  }) : null}
                  renderHeader={label}
            >
                {options && options.length > 0 ? options.map(i => (
                    <div className="radio-item" key={i.value}><Radio key={i.value} checked={valueObject==i.value||value==i.value||i.checked} onChange={this._onChange.bind(this, {value:i.value,i:i})}>
                        {i.label}
                    </Radio></div>
                )) : null}
                {RunInDesign ? optionsDesign.map(i => (
                    <div className="radio-item" key={i.value}><Radio key={i.value} checked={value==i.value||i.checked} onChange={this._onChange.bind(this, i.value)}>
                        {i.label}
                    </Radio></div>
                )) : null}
            </List>
        )
    }
}
YYRadioGroup.defaultProps = {
    field: 'default',
    label: '',
    options: null,
    defaultValue:[],
    visible:true,
};

export default YYRadioGroup;