Merge pull request #1043 from ant-design/radio_value

allow more value type for radiogroup

components/checkbox/Group.jsx

@@ -16,10 +16,14 @@ export default React.createClass({
     onChange: React.PropTypes.func,
   },
   getInitialState() {
-    const { value, defaultValue } = this.props;
+    const props = this.props;
-    return {
+    let value;
-      value: value || defaultValue,
+    if ('value' in props) {
-    };
+      value = props.value;
+    } else if ('defaultValue' in props) {
+      value = props.defaultValue;
+    }
+    return { value };
   },
   componentWillReceiveProps(nextProps) {
     if ('value' in nextProps) {

components/checkbox/demo/group.md

@@ -2,7 +2,7 @@
 
 - order: 3
 
-方便的生成一个 Checkbox 组。
+方便的从数组生成 Checkbox 组。若需要 label 和 value 分离请直接使用 Checkbox。
 
 ---
 

components/radio/demo/radiogroup.md

@@ -13,11 +13,11 @@ const RadioGroup = Radio.Group;
 const App = React.createClass({
   getInitialState() {
     return {
-      value: 'a'
+      value: 1
     };
   },
   onChange(e) {
-    console.log(`radio checked:${e.target.value}`);
+    console.log(`radio checked`, e.target.value);
     this.setState({
       value: e.target.value
     });
@@ -26,12 +26,11 @@ const App = React.createClass({
     return (
       <div>
         <RadioGroup onChange={this.onChange} value={this.state.value}>
-          <Radio value="a">A</Radio>
+          <Radio key="a" value={1}>A</Radio>
-          <Radio value="b">B</Radio>
+          <Radio key="b" value={2}>B</Radio>
-          <Radio value="c">C</Radio>
+          <Radio key="c" value={3}>C</Radio>
-          <Radio value="d">D</Radio>
+          <Radio key="d" value={null}>D</Radio>
         </RadioGroup>
-        <div style={{ marginTop: 20 }}>你选中的: {this.state.value}</div>
       </div>
     );
   }

components/radio/group.jsx

@@ -1,13 +1,15 @@
 import React from 'react';
 
 function getCheckedValue(children) {
-  let checkedValue = null;
+  let value = null;
+  let matched = false;
   React.Children.forEach(children, (radio) => {
     if (radio.props && radio.props.checked) {
-      checkedValue = radio.props.value;
+      value = radio.props.value;
+      matched = true;
     }
   });
-  return checkedValue;
+  return matched ? { value } : undefined;
 }
 
 export default React.createClass({
@@ -16,34 +18,56 @@ export default React.createClass({
       prefixCls: 'ant-radio-group',
       disabled: false,
       onChange() {
-      }
+      },
     };
   },
   getInitialState() {
     let props = this.props;
+    let value;
+    if ('value' in props) {
+      value = props.value;
+    } else if ('defaultValue' in props) {
+      value = props.defaultValue;
+    } else {
+      const checkedValue = getCheckedValue(props.children);
+      value = checkedValue && checkedValue.value;
+    }
     return {
-      value: props.value || props.defaultValue || getCheckedValue(props.children)
+      value,
     };
   },
   componentWillReceiveProps(nextProps) {
-    if ('value' in nextProps || getCheckedValue(nextProps.children)) {
+    if ('value' in nextProps) {
+      this.setState({
+        value: nextProps.value,
+      });
+    } else {
+      const checkedValue = getCheckedValue(nextProps.children);
+      if (checkedValue) {
         this.setState({
-        value: nextProps.value || getCheckedValue(nextProps.children)
+          value: checkedValue.value,
         });
       }
+    }
   },
   onRadioChange(ev) {
+    if (!('value' in this.props)) {
       this.setState({
-      value: ev.target.value
+        value: ev.target.value,
       });
+    }
     this.props.onChange(ev);
   },
   render() {
     const props = this.props;
     const children = React.Children.map(props.children, (radio) => {
       if (radio.props) {
+        const keyProps = {};
+        if (!('key' in radio) && typeof radio.props.value === 'string') {
+          keyProps.key = radio.props.value;
+        }
         return React.cloneElement(radio, {
-          key: radio.props.value,
+          ...keyProps,
           ...radio.props,
           onChange: this.onRadioChange,
           checked: this.state.value === radio.props.value,

package.json

@@ -41,7 +41,7 @@
     "rc-animate": "~2.0.2",
     "rc-calendar": "~5.4.0",
     "rc-cascader": "~0.9.0",
-    "rc-checkbox": "~1.2.0",
+    "rc-checkbox": "~1.3.0",
     "rc-collapse": "~1.4.4",
     "rc-dialog": "~5.3.1",
     "rc-dropdown": "~1.4.3",