如何取消选中 React 中的单选按钮？答案

【问题标题】：How to uncheck radio-buttons in React?如何取消选中 React 中的单选按钮？
【发布时间】：2021-01-29 11:05:09
【问题描述】：

我是 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>`

【问题讨论】：

标签： refresh reset checked radiobuttonlist unchecked

【解决方案1】：

我通过用输入替换 IonRadio 解决了这个问题。不确定这是否是最佳解决方案，但它确实有效。

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

【讨论】：