`RadioButton` in `RadioGroup` did not render correctly.

Bug

When I render RadioButton as child of RadioGroup, I found that radio button it is not checked when clicked, but Radio worked.

Code as follows:

import React, { Component, PropTypes } from 'react'
import { Radio } from 'antd'
import cx from 'classnames'
import { autobind } from 'core-decorators'
import BasePropertyControl from './BasePropertyControl'

const RadioGroup = Radio.Group;
const RadioButton = Radio.Button

/**
 * 文字对齐按钮
 *
 * @class
 */
@BasePropertyControl
export default class AlignButtonGroup extends Component {

    @autobind
    handleChange(evt) {
        this.props.onChange({
            [this.props.name]: evt.target.value
        })
    }

    render() {
        const { value } = this.props

        return (
            <RadioGroup
                size         = "small"
                defaultValue = "left"
                value        = {value}
                onChange     = {this.handleChange}
            >
                <RadioButton
                    className = "AlignButtonGroup__button"
                    value     = "left"
                >
                    左
                </RadioButton>
                <RadioButton
                    className = "AlignButtonGroup__button"
                    value     = "center"
                >
                    中
                </RadioButton>
                <RadioButton
                    className = "AlignButtonGroup__button"
                    value     = "right"
                >
                    右
                </RadioButton>
            </RadioGroup>
        )
    }
}

Why

Digging into code, I found that rc-checkbox didn’t trigger props.onChange because of undefined.

And in group.jsx:

// Actually, radio.type !== RadioButton
if (radio && (radio.type === Radio || radio.type === RadioButton) && radio.props) {
    const keyProps = {};
    if (!('key' in radio) && typeof radio.props.value === 'string') {
        keyProps.key = radio.props.value;
    }
    return React.cloneElement(radio, {
        ...keyProps,
        ...radio.props,
        onChange: this.onRadioChange,
        checked: this.state.value === radio.props.value,
        disabled: radio.props.disabled || this.props.disabled,
    });
}

Actually, radio.type !== RadioButton, so it did not pass onChange props to radio

WTF! For React 0.14+ and using ES6 classes, we can using type check React.Component type. @see only allow children of a specific type in a react component

Let’s see what radio.type and RadioButton are

In Chrome devtools:

radio.type

RadioButton

Conclusion

They are not exactly equal

Because radio.type generated by es6 class with its originally prototype(with inferred displayName) But RadioButton is native code in antd

But I dont know why…?

@related issue: #4638

@related commit: Fix RadioGroup usage for #1119

---

Environment

• OS and its version: OS X EI Capitan 10.11.5
• Browser and its version: Chrome 56.0.2924.87 (64-bit)

Development enviroment

• webpack: 1.13.1
• antd: 2.8.0
• babel-core: 6.9.1
• babel-plugin-antd: 0.5.1

babelrc

{
    "presets": ["es2015", "stage-0", "react"],
    "plugins": [
        "lodash",
        "react-hot-loader/babel",
        ["transform-decorators-legacy"],
        ["transform-runtime", {
            "polyfill": true,
            "regenerator": true
        }]
    ]
}

[erraX]

It seems to be react-hot-loader@3.0.0-beta.6 issue, and has nothing to do with antd.

Thanks for your answer.

// app.js

import React from 'react'
import ReactDOM from 'react-dom'

import config from './config'
import { Radio } from 'antd'

const RadioButton = Radio.Button
const RadioGroup = Radio.Group

ReactDOM.render(
        <div>
            <RadioGroup defaultValue="a" size="large">
                <RadioButton value="a">Hangzhou</RadioButton>
                <RadioButton value="b">Shanghai</RadioButton>
                <RadioButton value="c">Beijing</RadioButton>
                <RadioButton value="d">Chengdu</RadioButton>
            </RadioGroup>
        </div>
    ),
    document.getElementById('mountNode')
)

// config.js

import React, { Component, PropTypes } from 'react'
import { Radio } from 'antd'

const RadioButton = Radio.Button

/* React hot loader will inject following code:

var _temp = function () {
  if (typeof __REACT_HOT_LOADER__ === 'undefined') {
    return;
  }

  __REACT_HOT_LOADER__.register(RadioButton, 'RadioButton', '/XX/config.js');
}();

/*

[lock[bot]]

This thread has been automatically locked because it has not had recent activity. Please open a new issue for related bugs and link to relevant comments in this thread.