如何在reactJs中一次单击单个单选按钮

Question

我有一个条件，如果状态值为2，则将有2个单选按钮，如果状态值为1，则将有1个单选按钮。为此，我编写了如下所示的函数：

renderRadioButton() {
    if(this.state.numberOfEmails === 1 ) {
      return <EmailRadioButton 
      data={this.props.data}
      handleDrawer={this.props.handleDrawer} /> ;
    } 
    else if(this.state.numberOfEmails === 2) {
      return (
        <div>
        <EmailRadioButton 
        />

        <p className={classes.radio}> &nbsp; </p>
        <EmailRadioButton 
       />
        </div>
       );
    }
  }

并且我已经将状态中的numberofEmails的值硬编码为2。

我的EmailRadioButtonComponent如下：

import classes from './emailRadioButtonComponent.scss';
import RadioGroup from '../../../../../Common/CommonComponents/radioButton.js';
import { getLocalizedStrings } from '../../manageAlertPreferencesLocalizedString';

class RadioButtonComp extends React.Component {

constructor() {
    super();
    this.strings = getLocalizedStrings('editEmailComponent');

    this.state = {
        options: ['abc.sce.com','No email alerts'],
        selectedOptions: '',
        selectedOptionValidStyle: '',
        radioOutline: '',
        validateRadioInputsForcibly: false,
        additionalInfoStateOpen: [false, false],
        hidePreviousButton: true,
        hasTextInputsError: false,

     };

     this.onCancelClick = this.onCancelClick.bind(this);
}

onRadioFocus = (e, keys) => {
    let newArr = (this.state.additionalInfoStateOpen).map((value, index) => {
      if (index === keys) {
        return true;
      }
      return false;
    });
    this.setState({
      radioOutline: e.target.value, additionalInfoStateOpen: newArr
    });
  }
  onRadioClick = (e, keys) => {
    this.setState({
      removeRadioButton : true,
      selectedOptions: this.state.options[keys],
      validateRadioInputsForcibly: false,
      radioOutline: e.target.value,
      selectedOptionValidStyle: e.target.value,
      validateTextInputsForcibly: false,
      hasTextInputsError: false,
      clearTextElements: true,
    });
  }
  onRadioBlur = () => {
    this.setState({
      radioOutline: '',
      selectedOptionValidStyle: this.state.selectedOptions,
    });
  }

  onCancelClick = () => {
    this.setState({removeRadioButton : false});
    alert('close');
  }


render() {
    return (
    <div>
        <div className={classes.scePasswordOptionContainer} aria-label='Email Container'>
                <div className={classes.sceBorderContainer + ' row'}>
                    <RadioGroup 
                        options={[this.state.options[0]]}
                        type='radio'
                        validStyle={this.state.selectedOptionValidStyle}
                        selectedOptions={this.state.selectedOptions}
                        radioOutLineFlag={this.state.radioOutline}
                        onClick={(event) => this.onRadioClick(event, 0)}
                        onFocus={(event) => this.onRadioFocus(event, 0)}
                        onBlur={this.onRadioBlur}
                        />
                </div>
        </div>
    </div>
      );    
}

}
export default RadioButtonComp;

现在，当我运行此命令时，可以看到单选按钮，但是我可以同时单击两个单选按钮，这意味着我一次只能单击1个单选按钮。我知道onClick( )函数有问题，但是我无法修复它。有人可以帮我吗？