fix(Radio): Controlled component problem.

docs/md/cn/radio.md

@@ -170,7 +170,7 @@ class Demo extends Component {
   constructor(props) {
     super(props);
     this.state = {
-      value: 3
+      value: "3"
     }
   }
   onChange(e,value) {
@@ -210,7 +210,7 @@ class Demo extends Component {
   constructor(props) {
     super(props);
     this.state = {
-      value: 3
+      value: "3"
     }
   }
   onChange(e,value) {
@@ -255,4 +255,4 @@ class Demo extends Component {
 |--------- |-------- |--------- |-------- |
 | label | Radio显示文字 | String/Number/Boolean | - |
 | value | Radio 的 value | String/Number | - |
-| disabled | Radio 是否禁用 | Boolean | - |
+| disabled | Radio 是否禁用 | Boolean | - |

src/radio/Radio.js

@@ -5,37 +5,42 @@ export default class Radio extends Component {
   constructor(props) {
     super(props);
     this.state = {
-      checked: props.checked
+      checked: props.checked,
+      disabled: props.disabled,
+      isButton: false,
     };
   }
   handleChange(e) {
     const checked = e.target.checked;
     const { children } = this.props;
     if (checked) {
       this.props.onChange(e, (this.props.value || children), checked);
+      this.setState({ checked: checked })
     }
   }
   // fixed jest test error.
   componentWillReceiveProps(nextProps) {
     if (this.props.checked !== nextProps.checked) {
-      this.setState({ checked: nextProps.checked }, () => {
-        this.radio.checked = nextProps.checked;
-      })
+      this.setState({ checked: nextProps.checked })
+    }
+    if (this.props.disabled !== nextProps.disabled) {
+      this.setState({ disabled: nextProps.disabled })
     }
   }
   render() {
-    const { prefixCls, className, children, onChange, disabled, value, ...other } = this.props;
-    const { checked } = this.state;
+    const { prefixCls, className, children, onChange, value, ...other } = this.props;
+    const { checked, disabled, isButton } = this.state;
     const cls = this.classNames(`${prefixCls}`, className, {
       'disabled': disabled, // 禁用状态
       'checked': checked,   // 选中
+      [`${prefixCls}-button`]: isButton,
     });
     const inputProps = {
       ref: (node) => { this.radio = node },
       type: 'radio',
-      disabled: disabled,
-      checked: checked || false,
       value: value || children,
+      checked: checked,
+      disabled: disabled,
       onChange: this.handleChange.bind(this),
     }
     return (
@@ -60,5 +65,7 @@ Radio.propTypes = {
 Radio.defaultProps = {
   prefixCls: "w-radio",
   disabled: false,
+  checked: false,
+  value: '',
   onChange: (v) => v,
 }

src/radio/RadioButton.js

@@ -1,32 +1,9 @@
-import React from 'react';
-import { PropTypes } from '../utils/';
 import Radio from './Radio';
 
 export default class RadioButton extends Radio {
-  render() {
-    const { prefixCls, className, children, onChange, checked, disabled, value, ...other } = this.props;
-    const cls = this.classNames(`${prefixCls}`, `${prefixCls}-button`, className, {
-      'disabled': disabled, // 禁用状态
-      'checked': checked,   // 选中
-    });
-    return (
-      <label {...other} className={cls}>
-        <span className={`${prefixCls}-inner`}>
-          <input type="radio" disabled={disabled} checked={checked} value={value || children} onChange={this.handleChange.bind(this)} />
-        </span>
-        <span className={`${prefixCls}-text`}>{children || value}</span>
-      </label>
-    )
+  componentDidMount() {
+    this.setState({
+      isButton: true
+    })
   }
 }
-
-RadioButton.propTypes = {
-  prefixCls: PropTypes.string,
-  value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
-  disabled: PropTypes.bool,
-  checked: PropTypes.bool
-}
-
-RadioButton.defaultProps = {
-  prefixCls: "w-radio",
-}

src/radio/__test__/Radio.test.js

@@ -16,14 +16,14 @@ describe('<Radio>', () => {
     expect(wrapper.type()).toEqual(Radio);
     expect(wrapper.at(0).prop('prefixCls')).toBe('w-radio');
     expect(wrapper.at(0).prop('disabled')).toBe(false);
-    expect(wrapper.at(0).prop('disabled')).toBe(false);
-    expect(wrapper.at(0).prop('checked')).toBeUndefined();
+    expect(wrapper.at(0).prop('checked')).toBe(false);
+    expect(wrapper.at(0).prop('value')).toBe('');
   });
 
   it('Test value and checked and disabled attributes.', () => {
     wrapper.setProps({ 'value': "1212", checked: true, disabled: true });
     expect(wrapper.find('input').at(0).getDOMNode().checked).toBe(true)
-    expect(wrapper.find('input').at(0).getDOMNode().disabled).toBe(true)
+    expect(wrapper.find('input').at(0).getDOMNode().disabled).toEqual(true)
     expect(wrapper.find('input').at(0).getDOMNode().value).toBe("1212")
   });