如何在React中取消选中单选按钮？

问题描述

我是React的新手，如果这太简单了，我感到抱歉。我打算进行测验，用户将对不同的问题回答“是”或“否”。

问题是：上一个问题的答案显示在下一个问题中。我希望每个问题都重新开始，并选择“是/否”。我怎样才能做到这一点？也许我误解了React处理单选按钮的方式。任何帮助将不胜感激。

下面是我的代码：

const QUESTION_ANSWER_OPTIONS = [ 'Yes','No' ]

<IonRadioGroup> 
    <IonList>
      <div>
      <IonListHeader>
        <IonToolbar>
        <IonTitle size="large"><b> {question} </b></IonTitle> 
        </IonToolbar>
      </IonListHeader>
      </div>
      <div>

      {(types ?? QUESTION_ANSWER_OPTIONS.map(type => {
        color = QUESTION_TYPE_COLOR[type] 

        return (
              <IonItem key={type}>

                <IonText color={color} style={{marginLeft: '15'}}><b>{type}</b></IonText>                   
                <IonRadio 
                  slot = "end" 
                  color = {color} 
                  value = {type} 
                  name = "yes-no options"
                  // checked = {false} //Says attribute does not exist
                  // defaultChecked = {false} //Does not work
                  onClick={onChange ? () => onChange(type) : undefined}>
                  </IonRadio>
              </IonItem>
              )
        }))}
      </div>
    </IonList>
    </IonRadioGroup>`

解决方法

我通过用输入替换IonRadio解决了这个问题。不知道这是否是最好的解决方案，但它是否有效。

            <input  
              type="radio" 
              slot="end" 
              color={color}
              value = {type} 
              name="yes-no options" 
              checked = {myChecked}
              onClick={onChange ? () => onChange(type) : undefined}>
              </input>