0

Tengo 2 radio button de MUI React, el que dice "Si" funciona perfecto al darle un solo click pero el que dice "No" hasta que le doy doble click, lo curioso es que si le doy un solo click a la palabra "No" o al icono de cierre funciona bien. El método handleRadio no tiene ningún e.preventDefault();

introducir la descripción de la imagen aquí

<RadioGroup row aria-label="quiz" name="quiz" value={factura} onChange={handleRadio/*(e) => setfactura(e.target.value)*/}>
                <FormControlLabel
                  style={{ marginRight: 50 }}
                  value="Sí"
                  control={<Radio />}
                  onClick={() => {
                    setActiveStep(2);
                    setfactura("Sí");
                  }}
                  label={
                    <div style={{ display: "flex", alignItems: "center" }}>
                      <Check style={{ marginRight: 5 }} />
                      Sí
                    </div>
                  }
                />
                <FormControlLabel
                  value="No"
                  control={<Radio />}
                  onClick={() => {
                    setActiveStep(3);
                    setfactura("No");
                  }}
                  label={
                    <div style={{ display: "flex", alignItems: "center" }}>
                      <Close style={{ marginRight: 5 }} />
                      No
                    </div>
                  }
                />
              </RadioGroup>
1
  • Eso pasa cuando usas frameworks. Prueba los radiobuttons nativos y verás. Yo mismo llevo 10 años usando código vanilla y tengo control absoluto sobre mis apps
    – user316201
    Commented el 12 mar. 2023 a las 14:49

1 respuesta 1

0

Es posible que el problema esté relacionado con la interacción entre el evento "click" del botón de radio y el evento "change" del grupo de radio.

Cuando hace clic en el botón "Sí", la función "onClick" establece el estado de "factura" en "Sí" y activa el siguiente paso. Esto es suficiente para actualizar el valor seleccionado en el grupo de radio y el componente se desplaza automáticamente al siguiente paso.

Sin embargo, cuando hace clic en el botón "No", la función "onClick" establece el estado de "factura" en "No" y activa el siguiente paso. El problema aquí puede ser que el componente no se actualiza automáticamente porque se espera que el evento "change" del grupo de radio se dispare después del evento "click" del botón de radio.

Para solucionar este problema, puede intentar agregar el método "setfactura" dentro de la función "handleRadio" y eliminar la función "onClick" en los botones de radio. De esta manera, se actualiza el estado del componente inmediatamente después de seleccionar un botón de radio. El código podría quedar así:

const handleRadio = (event) => {
  setfactura(event.target.value);
  if (event.target.value === "Sí") {
    setActiveStep(2);
  } else {
    setActiveStep(3);
  }
};

<RadioGroup row aria-label="quiz" name="quiz" value={factura} onChange={handleRadio}>
  <FormControlLabel
    style={{ marginRight: 50 }}
    value="Sí"
    control={<Radio />}
    label={
      <div style={{ display: "flex", alignItems: "center" }}>
        <Check style={{ marginRight: 5 }} />
        Sí
      </div>
    }
  />
  <FormControlLabel
    value="No"
    control={<Radio />}
    label={
      <div style={{ display: "flex", alignItems: "center" }}>
        <Close style={{ marginRight: 5 }} />
        No
      </div>
    }
  />
</RadioGroup>
1
  • Al parecer no va por ahi, en consola recibo este mensaje unhandled_error {err: 'Error: Detected container element removed from DOM…nox/web/static/js/vendors~main.chunk.js:460080:9)', timestamp: '1678722586421', referer: 'localhost:3000', uid: 'uid_7b412b017f_mtu6ndk6mje', env: 'sandbox'} Commented el 13 mar. 2023 a las 15:51

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.