Merge pull request #56 from ant-design/radio

fix radiogroup api

components/radio/demo/radiogroup.md

@@ -13,24 +13,24 @@ var RadioGroup = antd.RadioGroup;
 var App = React.createClass({
   getInitialState: function () {
     return {
-      selectedValue:"a"
+      value:"a"
     };
   },
   onChange(ev) {
     console.log('radio checked:' + ev.target.value);
     this.setState({
-      selectedValue:ev.target.value
+      value:ev.target.value
     })
   },
   render() {
     return<div>
-      <RadioGroup onChange={this.onChange}>
+      <RadioGroup onChange={this.onChange} value={this.state.value}>
-        <Radio value="a" checked={true}>A</Radio>
+        <Radio value="a">A</Radio>
         <Radio value="b" >B</Radio>
         <Radio value="c" >C</Radio>
         <Radio value="d" disabled={true}>D</Radio>
       </RadioGroup>
-      你选中的:&nbsp;&nbsp;{this.state.selectedValue}
+      你选中的:&nbsp;&nbsp;{this.state.value}
     </div>
   }
 });

components/radio/group.jsx

@@ -1,32 +1,46 @@
 var React = require('react');
 var Radio = require('./index');
 
+function getCheckedValue(children) {
+  var checkedValue = null;
+  children.forEach(function (radio) {
+    if (radio.props && radio.props.checked) {
+      checkedValue = radio.props.value;
+    }
+  });
+  return checkedValue;
+}
+
 var AntRadioGroup = React.createClass({
   getDefaultProps: function () {
     return {
-      prefixCls: 'ant-radio-group'
+      prefixCls: 'ant-radio-group',
+      onChange: function () {
+      }
     };
   },
   getInitialState: function () {
-    var value = null;
+    var props = this.props;
-    this.props.children.forEach(function (radio) {
-      if (radio.props && radio.props.checked) {
-        value = radio.props.value;
-      }
-      return false;
-    });
     return {
-      selectedValue: value
+      value: props.value || props.defaultValue || getCheckedValue(props.children)
     };
   },
+  componentWillReceiveProps(nextProps) {
+    if ('value' in nextProps || getCheckedValue(nextProps.children)) {
+      this.setState({
+        value: nextProps.value || getCheckedValue(nextProps.children)
+      });
+    }
+  },
   render: function () {
-    var self = this;
+    var props = this.props;
-    var props = self.props;
+    var children = props.children.map((radio) => {
-    var children = props.children.map(function (radio) {
       if (radio.props) {
-        return <Radio {...radio.props}
+        return <Radio
-          onChange={self.onRadioChange}
+          key={radio.props.value}
-          checked={self.state.selectedValue === radio.props.value}
+          {...radio.props}
+          onChange={this.onRadioChange}
+          checked={this.state.value === radio.props.value}
         />;
       }
       return radio;
@@ -39,12 +53,10 @@ var AntRadioGroup = React.createClass({
   },
   onRadioChange: function (ev) {
     this.setState({
-      selectedValue: ev.target.value
+      value: ev.target.value
     });
-    if (typeof this.props.onChange === 'function') {
     this.props.onChange(ev);
   }
-  }
 });
 
 module.exports = AntRadioGroup;

components/radio/index.md

@@ -30,3 +30,6 @@
 | 参数           | 说明                                     | 类型       |  必选值 | 默认值 |
 |----------------|------------------------------------------|------------|---------|--------|
 | onChange       | 变化时回调函数，组合时必须 | Function(e:Event) | false | null |
+| value       | 当前值 |  |  |
+| defaultValue       | 初始值 |  |  |
+