0

Tengo un input select con su atributo name="prefix".

Tengo tambien el siguiente estado en react:

const initialForm = {
  name: "",
  email: "",
  prefix: "",
  area: "",
  phone: "",
  country: "",
  comments: "",
};
const [form, setForm] = useState(initialForm);

Y puedo actualizar el form de la siguiente forma:

setForm({
      ...form,
      [e.target.name]: e.target.value,
    });

Eso me coloca en el atributo prefix lo que viene en el value del input.

Ahora necesito hacerlo de esta forma:

setForm({
        ...form,
        prefix: e.target.value,
      });

Y no me funciona, he intentado con

setForm({
        ...form,
        form.prefix: e.target.value,
      });

Y tampoco me funciona, siendo que haciendolo en un objeto normal js si funciona:

let obj = {
   name: "",
   prefix: ""
  }

  obj = {...obj, prefix: "234"}

Cual seria la forma de lograrlo en el Hook?

ACTUALIZACION

He dado con el problema, pero no entiendo porque sucede esto con el spreadOp en el Hook.

Yo he puesto un codigo resumido pero aunque el original es bastante mas complejo aqui pongo mas o menos una version mas light:

import { useState } from "react";

const inicial = {
  nombre: "",
  prefix: "",
  tel: "",
};

const Form = () => {
  const [form, setForm] = useState(inicial);

  const handleChange = (e) => {
    if (e.target.tagName === "SELECT") {
      console.log(e.target[1].dataset.prefix);
      setForm({
        ...form,
        [e.target.name]: e.target.value,
        prefix: e.target[1].dataset.prefix,
      });
    }else //si no pongo este else se guarda ell target.value, pero no ell data-att
    setForm({
      ...form,
      [e.target.name]: e.target.value,
    });
  };
  console.log(form);
  return (
    <div>
      <input
        type="text"
        name="nombre"
        value={form.nombre}
        placeholder="Nombre"
        onChange={handleChange}
      />
      <select name="tel" value="" onChange={handleChange}>
        <option value="">Telefono</option>
        <option value="345-7890" data-prefix="234">
          3456-7890
        </option>
        <option value="1234-4567" data-prefix="678">
          1234-4567
        </option>
      </select>
    </div>
  );
};

export default Form;

el caso es que tengo varios inputs y un select que tiene a parte de un value un data-attribute y necesitaba ingresar al estado el valor (value) mas el valor de ese data-attr, por lo tanto la unica forma era detectando si el input es de tipo select y ahi hacer un setState(). Lo que no entiendo es porque si no esta el else el atributo prefix no se actualiza, no es que el spreadOp agrega al objeto sin modificar lo anterior?

A lo que me refiero es esto:

let obj = {
   name: "",
   prefix: ""
  }

  obj = {...obj, name: "Raul", prefix: "234"}
  obj = {...obj, name: "Hernan"}

  console.log(obj);

Aqui estoy sobreescribiendo pero la propiedad prefix queda con el valor del primer seteo

5
  • en cual hook? pon el código del hook tambien
    – Pipe
    el 26 abr. 2022 a las 23:14
  • @Pipe, el hook que estoy usando es useState, y su metodo setState() (hooks nativos de react) el 26 abr. 2022 a las 23:16
  • ¿Por qué dices que no te funciona? ¿Cuál es el código del evento en el que estás haciendo este setForm? el 27 abr. 2022 a las 13:55
  • En el código que pones no veo nada raro... quizas tengas alguna otra parte de código que no hayas compartido y que sea la causa del problema? por ejemplo algo que sobreescriba el estado o algo asi?
    – Pipe
    el 27 abr. 2022 a las 19:00
  • @Pipe, es algo asi, lo he solucionado pero realmente no entiendo por que pasa, pongo una actualizacion el 27 abr. 2022 a las 20:20

1 respuesta 1

0

Hola creo que he solucionado el problema, espero te funcione :D

import React, { useState, useEffect } from 'react';
import './style.css';

const initialForm = {
  name: '',
  email: '',
  prefix: '',
  area: '',
  phone: '',
  country: '',
  comments: '',
};

export default function App() {
  const [form, setForm] = useState(initialForm);

  useEffect(() => {
    console.log(form);
  }, [form]);

  const handleChange = (e) => {
    setForm({
      ...form,
      prefix: e.target.value,
    });
  };

  return (
    <div>
      <input
        onChange={(e) => handleChange(e)}
      />
    </div>
  );
}
1

Tu Respuesta

Al pulsar en “Publica tu respuesta”, muestras tu consentimiento a nuestros términos de servicio, política de privacidad y política de cookies

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