Question

我正在尝试显示多个单选按钮，这些单选按钮的右端有2个按钮。状态中提到了单选按钮的值，如下所示：

 this.state = {
        email: ['abc.gmail.com','def.gmail.com','No email alerts']
     };

单选按钮的数量取决于状态中“电子邮件”值的数量。因此，在我的渲染函数中，我调用了<RadioGroup />组件，该组件已经在我的项目中设计并试图显示单选按钮。相同的代码如下：

import RadioGroup from '../../../../Common/CommonComponents/radioButton.js';

class EmailComp extends React.Component {

render() {
  return(
   <div>
      {this.state.options.map((emails)  =>  <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 className={classes.sceFullButtonContainer + ' row'}>
              {/* <div className={this.props.data.emailDrawer.isDrawerOpen ? classes.sceDisplayNothing : void (0)}> */}
                <div className={classes.scePasswordButtonContainer}>
                  <div className=' col-xs-2'>
                    <button
                      id='cancelEmail'
                      className={classes.sceDeleteButton}
                      tabIndex='0'
                      onClick={this.onCancelClick}
                    >
                      <i className={'far fa-times-circle fa-lg'} />
                    </button>
                    <button
                      id='editEmail'
                      tabIndex='0'
                      aria-label='Edit Email'
                      className={classes.sceEditButton}
                      onClick={this.props.handleEmailToggle} >
                      <i className='fas fa-pencil-alt fa-lg sce-fontColor-white' />
                    </button>
                  </div>
                </div>
              {/* </div> */}
            </div>
        </div>

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

现在，我不知道如何更改单选按钮内容的内容。当前发生的情况是该标签仅具有索引0的值，即“ abc.gmail.com”。因此，所有3个单选按钮都显示 abc.gmail.com 。那么，如何从单选按钮的map函数中获取所有3个值？

如何使用map（）函数在ReactJs中显示多个单选按钮

0 个答案: