1

Tengo un radiobutton con dos opciones: uno se llama "si" y el otro botón se llama "no". Al darle clic al botón "si" este me abre un div con otro radiobutton, al darle clic al boton "no" el div se oculta con el radio button; lo que necesito es que se mantenga lo seleccionado en el radio button que está en el div cuando se muestra ya que si se oculta y vuelve y se muestra no aparece lo que seleccioné:

Código: https://codesandbox.io/s/elated-dew-75dwf0?file=/src/App.js:0-1747

Código:

    import React, { useState } from "react";

    function Pruebas() {
      const [value2, setValue2] = useState("no");

      return (
        <div>
          <div className="col-sm-6">
            <div className="form-check">
              <input
                className="form-check-input"
                type="radio"
                name="radio1"
                value="no"
                checked={value2 === "no"}
                onChange={(e) => setValue2(e.currentTarget.value)}
              />
              <label className="form-check-label">NO</label>
              &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
              <input
                className="form-check-input"
                type="radio"
                value="si"
                name="radio1"
                checked={value2 === "si"}
                onChange={(e) => setValue2(e.currentTarget.value)}
              />
              <label className="form-check-label">SI</label>
            </div>
          </div>

          <div className="col-sm-7">
            {value2 === "si" && (
              <div className="card">
                <div className="card-body">
                  <div className="form-check">
                    <input
                      className="form-check-input"
                      type="radio"
                      name="radio1_div"
                      value="div_no"
                    />
                    <label className="form-check-label">DIV_NO</label>
                    &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
                    <input
                      className="form-check-input"
                      type="radio"
                      value="div_si"
                      name="radio1_div"
                    />
                    <label className="form-check-label">DIV_SI</label>
                  </div>
                </div>
              </div>
            )}
          </div>
        </div>
      );
    }

    export default Pruebas;

1 respuesta 1

1

Creo que una posible solución es agregando un nuevo estado (lo llamé value, dale el nombre que quieras) para estos dos checkbox, y agregarle la propiedad checked igualada a un booleano que, en el caso que sea (div_si o div_no), muestre el que check que corresponde, checkeado

https://codesandbox.io/s/loving-moser-pgtlpm?file=/src/App.js

import React, { useState } from "react";

function Pruebas() {
  const [value2, setValue2] = useState("no");
  const [value, setValue] = useState(null);

  return (
    <div>
      <div className="col-sm-6">
        <div className="form-check">
          <input
            className="form-check-input"
            type="radio"
            name="radio1"
            value="no"
            checked={value2 === "no"}
            onChange={(e) => setValue2(e.currentTarget.value)}
          />
          <label className="form-check-label">NO</label>
          &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
          <input
            className="form-check-input"
            type="radio"
            value="si"
            name="radio1"
            checked={value2 === "si"}
            onChange={(e) => setValue2(e.currentTarget.value)}
          />
          <label className="form-check-label">SI</label>
        </div>
      </div>

      <div className="col-sm-7">
        {value2 === "si" && (
          <div className="card">
            <div className="card-body">
              <div className="form-check">
                <input
                  className="form-check-input"
                  type="radio"
                  name="radio1_div"
                  value="div_no"
                  onChange={(e) => setValue(e.target.value)}
                  checked={value === "div_no"}
                />
                <label className="form-check-label">DIV_NO</label>
                &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
                <input
                  className="form-check-input"
                  type="radio"
                  value="div_si"
                  name="radio1_div"
                  onChange={(e) => setValue(e.target.value)}
                  checked={value === "div_si"}
                />
                <label className="form-check-label">DIV_SI</label>
              </div>
            </div>
          </div>
        )}
      </div>
    </div>
  );
}

export default Pruebas;

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.