1

Estoy usando create-react-app

Tengo los siguientes campos:

<div className="flex flex-col md:flex-row pb-4 mb-4">
    <div className="w-64 font-bold h-6 mx-2 mt-3 text-gray-800">Datos de contacto
        <div>
            <button type="button" className="mr-3 text-sm bg-blue-500 hover:bg-blue-700 text-white py-1 px-5 rounded focus:outline-none focus:shadow-outline"
            >+</button>
        </div>
    </div>
    <div className="border-b border-gray-200">
        <div className="flex flex-col md:flex-row">
            <div className="w-full  mx-2">
                <div className="my-2 p-1 bg-white flex border border-gray-200 rounded">
                    <input
                        placeholder="Nombre del contacto"
                        name="nombre"
                        value={nombre}
                        onChange={onChange}
                        className="p-1 px-2 appearance-none outline-none w-full text-gray-800 " /> </div>
            </div>
            <div className="w-full  mx-2">
                <div className="my-2 p-1 bg-white flex border border-gray-200 rounded">
                    <input
                        placeholder="Email"
                        name="email"
                        value={email}
                        onChange={onChange}
                        className="p-1 px-2 appearance-none outline-none w-full text-gray-800 " /> </div>
            </div>
            <div className="w-full  mx-2">
                <div className="my-2 p-1 bg-white flex border border-gray-200 rounded">
                    <input
                        placeholder="Teléfono"
                        name="telefono"
                        value={telefono}
                        onChange={onChange}
                        className="p-1 px-2 appearance-none outline-none w-full text-gray-800 " /> </div>
            </div>
            <div className="w-full  mx-2">
                <div className="my-2 p-1 bg-white flex border border-gray-200 rounded">
                    <input
                        placeholder="Área o Sector"
                        name="area"
                        value={area}
                        onChange={onChange}
                        className="p-1 px-2 appearance-none outline-none w-full text-gray-800 " /> </div>
            </div>
            <div className="w-full mx-2 flex items-center justify-center">
                <button type="button"
                    className="text-sm bg-red-500 hover:bg-red-700 text-white py-1 px-2 rounded focus:outline-none focus:shadow-outline">Eliminar</button>
            </div>
        </div>

    </div>
</div>

(Vean el signo "más"(+))

Como se ve el html

Y manejo el estado del componente con onChange para obtener los valores de los campos de esta manera:

// State Inicial
const [datosContacto, setdatosContacto] = useState({
    nombre: '', 
    email: '', 
    telefono: '', 
    area: ''
});

const {nombre, email, telefono, area} = datosContacto;

const onChange = (e) => {

    setdatosContacto({
        ...datosContacto,
        [e.target.name]: e.target.value
    }
    )
}

Como puedo crear esos campos nuevamente (e infinitamente) al presionar el boton "+"?

Al presionar el botón "eliminar" debería tener una referencia para eliminar los campos (no solo los valores, si no los campos en sí, "el codigo html").

Y además tengo que tener una referencia al "name" de cada input para manejar el estado con setState pero no tengo idea como hacer eso dinamicamente.

Muchas gracias!

2 respuestas 2

2

Ejemplo Online: https://codesandbox.io/s/elastic-paper-9qnco

Te comparto un ejemplo que cumple con lo siguiente:

  • Se creo un defaultState que se encargara de guardar los valores que cambien relacionados a una fila de componentes
  • Se creo un componente llamado Row el cual genera una fila que contiene los inputs [nombre, email, telefono, area] y el botón de eliminar relacionado a esa fila
  • Se creo el método handleOnChange el cual se encargara de actualizar el estado del formulario cada vez que un input cambie su estado basado en el indice de la fila, el nombre y el valor del input.
  • Se creo el método handleOnAdd el cual se encargara de agregar una nueva fila al estado cuando se presione el botón de Agregar
  • Se creo el método handleOnRemove el cual se encargara de eliminar una fila por completo al presionar el botón eliminar relacionado a la misma.

Como análisis particular lo primero es que necesitas tener un estado global o relacionado al formulario en curso el cual pueda almacenar todos los valores de los diferentes componentes "inputs" pero teniendo cuenta que por cada fila tienes elementos con el mismo nombre por lo cual debes tratar este problema como una tabla en la cual tienes filas y columnas cada fila tiene un indice y cada columna tiene un nombre por lo cual al cambiar un elemento debes relacionarlo a la fila en la que se encuentra.

Espero poder ayudarte.

const defaultState = {
  nombre: "",
  email: "",
  telefono: "",
  area: ""
};

function Row({ onChange, onRemove, nombre, email, telefono, area }) {
  return (
    <div>
      <input
        value={nombre}
        onChange={e => onChange("nombre", e.target.value)}
        placeholder="Nombre del contacto"
      />
      <input
        placeholder="Email"
        value={email}
        onChange={e => onChange("email", e.target.value)}
      />
      <input
        placeholder="Teléfono"
        value={telefono}
        onChange={e => onChange("telefono", e.target.value)}
      />
      <input
        placeholder="Área o Sector"
        value={area}
        onChange={e => onChange("area", e.target.value)}
      />
      <button onClick={onRemove}>Eliminar</button>
    </div>
  );
}

export default function App() {
  const [rows, setRows] = useState([defaultState]);

  const handleOnChange = (index, name, value) => {
    const copyRows = [...rows];
    copyRows[index] = {
      ...copyRows[index],
      [name]: value
    };
    setRows(copyRows);
  };

  const handleOnAdd = () => {
    setRows(rows.concat(defaultState));
  };

  const handleOnRemove = index => {
    const copyRows = [...rows];
    copyRows.splice(index, 1);
    setRows(copyRows);
  };

  return (
    <div className="App">
      {rows.map((row, index) => (
        <Row
          {...row}
          onChange={(name, value) => handleOnChange(index, name, value)}
          onRemove={() => handleOnRemove(index)}
          key={index}
        />
      ))}
      <button onClick={handleOnAdd}>Agregar</button>
    </div>
  );
}
0

Una posible solución sería utilizar una lista de "grupos de campos".

Esta sería nuestra definición de un "grupo de campos":

  const defaultField = {
    nombre: "",
    email: "",
    telefono: "",
    area: "",
  };

En este grupo tenemos los campos:

  • nombre
  • email
  • telefono
  • area

Ahora con esta definición podemos crear una lista de grupos de campos y almacenar esta en nuestro state:

  const [data, setData] = useState([defaultField]);

Después podemos utilizar el index de cada grupo en la lista para eliminar el grupo seleccionado por el usuario:

  const onDelete = (indexToDelete) => {
    const newFields = data.filter((d, index) => index !== indexToDelete);
    setData([...newFields]);
  };

Luego podemos replicar la misma lógica para buscar el grupo de campos y editar su valor cuando el usuario realice alguna modificación en el formulario:

  const onChange = (indexParent, event) => {
    const newData = data.map((d, index) => {
      if (index === indexParent) {
        d[event.target.name] = event.target.value;
      }

      return d;
    });

    setData([...newData]);
  };

Finalmente te dejo un ejemplo de la implementación de esta solución, donde traté de modificar lo menos posible el código que ya tenías implementado:

import React, { useState } from "react";

const FieldInput = ({ indexParent, placeholder, name, value, onChange }) => (
  <div className="w-full  mx-2">
    <div className="my-2 p-1 bg-white flex border border-gray-200 rounded">
      <input
        placeholder={placeholder}
        name={name}
        value={value}
        onChange={(event) => onChange(indexParent, event)}
        className="p-1 px-2 appearance-none outline-none w-full text-gray-800 "
      />
    </div>
  </div>
);

const App = () => {
  const defaultFields = {
    nombre: "",
    email: "",
    telefono: "",
    area: "",
  };

  const [data, setData] = useState([defaultFields]);

  // Utilizamos el index del grupo de campos para eliminar ese grupo de la lista
  const onDelete = (indexToDelete) => {
    const newFields = data.filter((d, index) => index !== indexToDelete);
    setData([...newFields]);
  };

  // Agregamos el nuevo grupo de campos al final de la lista
  const onAdd = () => {
    setData([...data, { ...defaultFields }]);
  };

  // Utilizamos el index del grupo de campos para buscar ese grupo
  // y editar el campo correspondiente
  const onChange = (indexParent, event) => {
    const newData = data.map((d, index) => {
      if (index === indexParent) {
        d[event.target.name] = event.target.value;
      }

      return d;
    });

    setData([...newData]);
  };

  return (
    <div className="App">
      <div className="flex flex-col md:flex-row pb-4 mb-4">
        <div className="w-64 font-bold h-6 mx-2 mt-3 text-gray-800">
          Datos de contacto
          <div>
            <button
              onClick={onAdd}
              type="button"
              className="mr-3 text-sm bg-blue-500 hover:bg-blue-700 text-white py-1 px-5 rounded focus:outline-none focus:shadow-outline"
            >
              +
            </button>
          </div>
        </div>
        <div className="border-b border-gray-200">
          <div className="flex flex-col md:flex-row">
            {data.map((d, index) => {
              return (
                <div key={`field-${index}`}>
                  <FieldInput
                    indexParent={index}
                    placeholder="Nombre del contacto"
                    name="nombre"
                    value={d.nombre}
                    onChange={onChange}
                  />
                  <FieldInput
                    indexParent={index}
                    placeholder="Email"
                    name="email"
                    value={d.email}
                    onChange={onChange}
                  />
                  <FieldInput
                    indexParent={index}
                    placeholder="Teléfono"
                    name="telefono"
                    value={d.telefono}
                    onChange={onChange}
                  />
                  <FieldInput
                    indexParent={index}
                    placeholder="Área o Sector"
                    name="area"
                    value={d.area}
                    onChange={onChange}
                  />

                  <div className="w-full mx-2 flex items-center justify-center">
                    <button
                      onClick={() => onDelete(index)}
                      type="button"
                      className="text-sm bg-red-500 hover:bg-red-700 text-white py-1 px-2 rounded focus:outline-none focus:shadow-outline"
                    >
                      Eliminar
                    </button>
                  </div>
                </div>
              );
            })}
          </div>
        </div>
      </div>
    </div>
  );
};

export default App;

Aquí puedes revisar la documentación de los métodos filter, map y de la spread syntax:

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.