1

Quiero agregar empresas a un determinado usuario. He logrado que al momento de seleccionar una empresa los datos se guarden dentro de un arreglo, pero al momento de deseleccionar me vuelve a guardar el dato que estoy deseleccionado. He tratado de recorrer el arreglo pero no me ha salido.

Aquí estoy seleccionando las empresas

Aquí estoy seleccionando las empresas

Aquí estoy deseleccionando una empresa pero esta se vuelve a cargar

Aquí estoy de-seleccionando una empresa pero esta se vuelve a cargar

Aquí podemos ver que el código 020 se vuelve a cargar al momento de deseleccionar y lo que yo busco es eliminarlo al momento de deseleccionar:

Aquí podemos ver que el código 020 se vuelve a cargar al momento de, de-seleccionar y lo que yo busco es eliminarlo al momento de de-seleccionar

//captura los datos al momento de seleccionar un Checkbox
ChangeEmp = (e) => {
  this.state.form3.push(e);
  console.log(this.state.form3);
};

Aquí tengo mi Modal en donde mando a llamar la función changeEmp


<Modal isOpen={this.state.modalnewEmpresa}>
  <ModalHeader style={{ display: "block" }}>
    <span style={{ float: "right" }} onClick={() => this.modalnewEmpresa()}>
      x
    </span>
  </ModalHeader>
  <ModalBody>
    <FormLabel component="legend">Lista de Empresas</FormLabel>
    <br />
    <br />
    <FormControl>
      <RadioGroup>
        {this.state.empresas.map((empresa, index) => {
          return (
            <FormControlLabel
              key={index}
              name={index}
              value={empresa.codigo}
              control={<Checkbox />}
              label={empresa.codigo + " - " + empresa.nombre}
              onChange={() => {
                this.ChangeEmp(empresa);
              }}
            />
          );
        })}
      </RadioGroup>
    </FormControl>
  </ModalBody>
  <ModalFooter>
    <button className="btn btn-success">Insertar</button>
    <button className="btn btn-danger" onClick={() => this.modalnewEmpresa()}>
      Cancelar
    </button>
  </ModalFooter>
</Modal>;

2
  • tu funcion changeEmp solo agrega los elementos al array, pero nunca los elimina. Lo que deberia hacer la funcion (se me ocurre) es preguntar si el boton está checkeado o no. Si no lo está, hace push, si está checkeado, busca el valor y lo elimina del array.
    – Agustin G.
    Commented el 18 may. 2021 a las 2:21
  • Si pudieras compartir el código del componente Checkbox, saludos
    – g.4
    Commented el 18 may. 2021 a las 20:36

1 respuesta 1

0

Un poco tarde la respuesta, pero espero que le pueda servir a otras personas: primero créate una función específica para remover, como por ejemplo

 const handleChangeRemove = (item) => () => {
    setListSelected((items) => items.filter((i) => i.id !== item.id));
  };

con el filter vamos a retornar que el id de checkbox ya seleccionado sea igual al que ocurrió en el segundo evento onchange, de una función previa donde estamos guardando los elemento seleccionados, como por ejemplo

const handleChangeSelect = (items) => () => {
    setListSelected([...listSelected, items]);
  };

Esto ya dependerá si los estás pasando por props o no, pero en dado caso, pasa como props ambas funciones al componente donde tiene el .map() de los checkbox.

También sería recomendable tener un estado para evaluar cuando el checkbox este true o false, esto nos facilittará y dará más control sobre el checkbox y más si se quiere hacer este tipo de funcionalidades, entonces

const [isChecked, setIsChecked] = useState(false);

esta lista también la pasaremos por props si es necesario, el valor como tal de isChecked.

Una vez teniendo eso lo primero que se debería hacer es crear una función donde me guarde qué check está seleccionado y cuál no, sería tal que así

const isSelected = ({ item }) => listDaySelected.some((i) => i.item === item);

luego en el momento que tengamos nuestro checkbox podríamos hacerlo de esta manera:

{MocksInfoForChechbox.map((i) => (
 <Checkbox
   key={id}
   value={i}
   onChange={isSelected(i) ? handleChangeRemove(i): handleChangeSelect(i)}
   defaultChecked={isSelected(i)}
 />
)}

esto lo que hará es que el evento onChange va a detectar primero la función que le isSelect, para evaluar si ha sido seleccionado y con id en específico, en dado caso sea cierto, o sea que si existe ese id, en el state donde se está almacenando el array de objeto, lo que va a hacer es eliminarlo, en caso contrario, va a agregar ese objeto al state como lo indica la función.

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.