ReactJS：單選按鈕復位

Question

我有一個表格，其中有avRadioButton 。

當我單擊此radioButton之一時，我保存值“S”或“N”。 但是，當我單擊resetForm時，該值設置為空字符串，但單選按鈕仍處於選中狀態（因此，如果我再次單擊提交表單，則使用radioButton的值）

    const [formModel, setFormModel] = useState({
        //... other fields
        perFlgattivo: '',
      });
    
    const handleFormReset = e => {
        setFormModel({
        //... other fields
          perFlgattivo: '',
        });  
    }
    
    const handleChangeRadio = e => {
        const { name, value } = e.target;
        console.log("e.target ", e.target)
        setFormModel(prevState => ({
          ...prevState,
          [name]: value,
        }));
      };

這是我的單選按鈕形式：

    <AvRadioGroup name="perFlgattivo" inline>
                        <Label id="perFlgattivo">Active</Trans>
                        </Label>
                        <br></br>
                        <AvRadio
                          id="perFlgattivo"
                          name="perFlgattivo"
                          data-cy="perFlgattivo"
                          label="Si"
                          value="S"
                          onChange={handleChangeRadio}
                          checked={formModel.perFlgattivo}
                        />
                        <AvRadio
                          id="perFlgattivo"
                          name="perFlgattivo"
                          data-cy="perFlgattivo"
                          label="No"
                          value="N"
                          onChange={handleChangeRadio}
                          checked={formModel.perFlgattivo}
                        />
                      </AvRadioGroup>

所以我的問題是當我試圖清除該值時，因為即使formModel.perFlgattivo產生一個空字符串，表單中的值仍然處於選中狀態

Answer 1

這是一個非常粗魯的解決方案，但checked={formModel.perFlgattivo.length > 0}肯定會解決您的問題。

Вut 一般單選按鈕的值字段應包含boolean 。 嘗試在表單重置時將perFlgattivo默認值更改為false和相同。