Reactjs 如何避免材质ui单选按钮被放置在父包装元素中的限制？

我有以下反应组件：

import React, { Component } from 'react';
import classes from './generalinfo.css';
import { Link } from 'react-router-dom';
import { connect } from 'react-redux';
import { RadioButton, RadioButtonGroup } from 'material-ui/RadioButton';


class GeneralInfo extends Component {

    _ToggleNextScreenButton = (e) => {

        let currentState = this.props.infoObj;        

        let checkboxStatus =  Object.keys(currentState).map( (value) => {
            return currentState[value];
        });

        let ArroyOfCheckboxValues = checkboxStatus.filter((value) => {
            return value === false;
        });

        if(ArroyOfCheckboxValues.length > 0) {
            e.preventDefault();
        }
    } 

    render() {
        return (
            <div className={ classes.screen2 } >
                <table className={ classes.initial__survey__details__table }>
                    <thead>
                        <tr>
                            <td>
                                Gender    
                            </td>
                            <td>
                                    Age    
                            </td>     
                        </tr>     
                    </thead>
                    <tbody>
                        <tr>
                            <td>
                                <input type="radio" name="genderRadio" value="male" 
                                       onChange={ (e) => { this.props.validateRadioInput({
                                           name  : e.target.getAttribute('name'), 
                                           value : e.target.getAttribute('value')
                                       }) }
                                    } />                                     
                                <label>Male</label>
                            </td>
                            <td>
                                <input type="radio" name="ageRadio" value="Less than 35" 
                                       onChange={ (e) => { this.props.validateRadioInput({
                                           name  : e.target.getAttribute('name'), 
                                           value : e.target.getAttribute('value')
                                       }) } } />                                   
                                <label>Less than 35</label>
                            </td>     
                        </tr>
                        <tr>
                            <td>
                                <input type="radio" name="genderRadio" value="Female" 
                                       onChange={ (e) => { this.props.validateRadioInput({
                                           name  : e.target.getAttribute('name'), 
                                           value : e.target.getAttribute('value')
                                       }) } } />                                    
                                <label>Female</label>
                            </td>
                            <td>
                                <input type="radio" name="ageRadio" value="More than 35" 
                                       onChange={ (e) => { this.props.validateRadioInput({
                                           name  : e.target.getAttribute('name'), 
                                           value : e.target.getAttribute('value')
                                       }) } } />                                    
                                <label>More than 35</label>
                            </td>     
                        </tr> 
                        <tr>
                            <td colSpan="2">
                                <Link to="/preferences" className={ [classes.btn , classes["btn--fullwidth"] , classes.btn__next  ].join(' ') } 
                                        onClick={ (e) => this._ToggleNextScreenButton(e) } >
                                    Next
                                </Link>
                            </td>   
                        </tr>     
                    </tbody>   
                </table>
            </div>
        );
    }

}

---

如何绕过单选按钮被放置在父包装内的限制（即，我希望将单选按钮与父包装一起使用），并且仍然使用

材质ui

您可以为

RadioButton

编写包装，然后使用该包装而不是原始的

RadioButton

：

consttdradiobutton=（{wrapperProps，…props}）=>(
);

---

这将把每个单选按钮包装成一个

，同时通过转发道具保留其所有功能。

您可以为

单选按钮

编写包装，然后使用该包装，而不是原来的

单选按钮

：

consttdradiobutton=（{wrapperProps，…props}）=>(
);

---

这将把每个单选按钮包装成一个

，同时通过转发道具保留其所有功能。

最新版本的material ui支持使用单选组件独立：@stone，仍然需要父包装

，否则它将更像一个复选框。material ui的最新版本支持使用Radio components standalone:@stone，仍然需要一个父包装

，否则它会更像一个复选框。你能在一个示例中向我展示这个世界是如何工作的代码演示吗？@AlexanderSolonik你的单选按钮需要放在表中有什么特殊原因吗？这很少见，尤其是属于同一组的单选按钮不在同一行。如果表格用于布局，则有更好（更简单）的解决方案。如果不是的话，如果单选按钮至少在同一行，你可以让你的生活更轻松。你能在一个例子中给我演示一下这个世界是如何工作的吗？@AlexanderSolonik你的单选按钮需要放在表格中有什么特殊原因吗？这很少见，尤其是属于同一组的单选按钮不在同一行。如果表格用于布局，则有更好（更简单）的解决方案。如果不是这样的话，如果单选按钮至少在同一排，你的生活就会轻松得多。

<RadioButtonGroup name="shipSpeed" defaultSelected="not_light">
      <RadioButton
        value="light"
        label="Simple"
        style={styles.radioButton}
      />
      <RadioButton
        value="not_light"
        label="Selected by default"
        style={styles.radioButton}
      />
      <RadioButton
        value="ludicrous"
        label="Custom icon"
        checkedIcon={<ActionFavorite style={{color: '#F44336'}} />}
        uncheckedIcon={<ActionFavoriteBorder />}
        style={styles.radioButton}
      />
    </RadioButtonGroup>