From efd768bf076f0e138d0efaa2b2fd18fc53ea5218 Mon Sep 17 00:00:00 2001 From: yiminghe Date: Sat, 20 Feb 2016 16:39:49 +0800 Subject: [PATCH] allow more value type for radiogroup --- components/radio/demo/radiogroup.md | 13 ++++---- components/radio/group.jsx | 46 ++++++++++++++++++++++------- package.json | 4 +-- 3 files changed, 44 insertions(+), 19 deletions(-) diff --git a/components/radio/demo/radiogroup.md b/components/radio/demo/radiogroup.md index 820bab872..7bd3991de 100644 --- a/components/radio/demo/radiogroup.md +++ b/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 (
- A - B - C - D + A + B + C + D -
你选中的: {this.state.value}
); } diff --git a/components/radio/group.jsx b/components/radio/group.jsx index 293288e68..f6c486b63 100644 --- a/components/radio/group.jsx +++ b/components/radio/group.jsx @@ -1,13 +1,17 @@ import React from 'react'; function getCheckedValue(children) { - let checkedValue = null; + let value = null; + let matched = 0; React.Children.forEach(children, (radio) => { if (radio.props && radio.props.checked) { - checkedValue = radio.props.value; + value = radio.props.value; + matched = 1; } }); - return checkedValue; + return matched ? { + value, + } : undefined; } export default React.createClass({ @@ -21,29 +25,51 @@ export default React.createClass({ }, 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 || getCheckedValue(nextProps.children) + value: nextProps.value }); + } else { + const checkedValue = getCheckedValue(nextProps.children); + if (checkedValue) { + this.setState({ + value: checkedValue.value + }); + } } }, onRadioChange(ev) { - this.setState({ - value: ev.target.value - }); + if (!('value' in this.props)) { + this.setState({ + 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, diff --git a/package.json b/package.json index bf2b5111e..a41ce1846 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "antd", - "version": "0.12.3", + "version": "0.12.2", "title": "Ant Design", "description": "一个 UI 设计语言", "homepage": "http://ant.design/", @@ -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",