2

He logrado hacer un formulario que se autocompleta al seleccionar el nombre de un usuario, llenando los demas imputs como, usuario, telefono y email automaticamente, pero quisiera saber como optimizarlo porque que tal que sean 15 campos en el form hacerlo de la manera que lo hice se que no es la mejor por repetir la misma linea de codigo

const selectedUsername = e.target.options[selectedIndex].getAttribute('')

tantas veces yo creeria que se podria hacer con un condicional pero no he logrado hacerlo.

Aca les dejo el componente:

const [state, setState] = React.useState({
    Usuario: '',
    Telefono: '',
    Email: '',
    Persona: 'Selecciona una opcion',
    });
const [usuarios, setUsuarios] = React.useState([])

React.useEffect(() => {
        axios.get('https://jsonplaceholder.typicode.com/users')
            .then(resp => {
               setUsuarios(resp.data)
               console.log(resp)
            })
    }, []);

const Opciones = () => {
      return (
        <Form.Control as="select" aria-label="Default select example" onChange={handleChangePerson}>
            <option>{state.Persona}</option>
            {usuarios.map(({id, name, phone, email, username }) => (
                <React.Fragment key={id}>
                <option value={name} telefono={phone} correo={email} user={username} >{name}</option>
            </React.Fragment>
            ))}
        </Form.Control>
        );
}
const handleChangePerson = (e) => {
    const selectedIndex = e.target.options.selectedIndex;
    const selectedUsername = e.target.options[selectedIndex].getAttribute('user')
    const selectedEmail = e.target.options[selectedIndex].getAttribute('correo')
    const selectedPhone = e.target.options[selectedIndex].getAttribute('telefono')
    setState({...state, Persona: e.target.value, Idperson: selectedIndex, Usuario: selectedUsername, Email: selectedEmail,Telefono: selectedPhone})
}

return(
        <>
            <div>
                <div className="Formulario">
                    <Container>
                        <div className="Formulario--title">
                            <h3>Selecciona una opcion</h3>
                        </div>
                        <Form.Group className="Formulario--group">
                                <Opciones></Opciones>
                                <Form.Control value={state.Usuario} onChange={handleChangePerson} disabled   type="text"
                                    placeholder="Usuario" />
                                <Form.Control value={state.Telefono} onChange={handleChangePerson} disabled type="text"
                                    placeholder="Telefono" />
                                <Form.Control value={state.Email} onChange={handleChangePerson} disabled  type="email"
                                    placeholder="Email" />
                            </Form.Group>
                    </Container>
                </div>
            </div>
        </>
    )
2
  • Podrías usar atributos de datos, con los nombres que debes establecer en el estado y recorrerlos con Object.entries() para generar el objeto.
    – Triby
    Commented el 10 sept. 2021 a las 17:49
  • Me podrías dar un ejemplo de como lo harías en este caso? Commented el 10 sept. 2021 a las 18:58

1 respuesta 1

1

Como te dije en comentarios, es mejor usar atributos de datos, obtenerlos con Object.entries() y recorrerlos en un ciclo para agregar cada propiedad.

Un ejemplo ejecutable:

document.querySelector('#usuarios').addEventListener('change', e => {
    // Obtener opción seleccionada
    let option = e.target.options[e.target.selectedIndex];
    // Crear objeto
    let obj = {};
    // Recorrer propiedades de atributos de datos
    Object.entries(option.dataset).forEach(entry => {
        // Separar nombre de propiedad y valor
        let [key, value] = entry;
        // Poner primera letra en mayúscula
        let property = key.charAt(0).toUpperCase() + key.slice(1);
        // Agregar propiedad al objeto
        obj[property] = value;
    });
    console.log(obj);
});
<p>Agregar información en atributos de datos:</p>

<select id="usuarios">
    <option value="Nombre 1" data-telefono="Tel 1" data-correo="Correo 1" data-user="Username 1">Nombre 1</option>
    <option value="Nombre 2" data-telefono="Tel 2" data-correo="Correo 2" data-user="Username 2">Nombre 2</option>
    <option value="Nombre 3" data-telefono="Tel 3" data-correo="Correo 3" data-user="Username 3">Nombre 3</option>
</select>

Para integrar en tu proyecto, la función quedaría más o menos así:

const handleChangePerson = (e) => {
    // Obtener opción seleccionada
    const option = e.target.options[e.target.selectedIndex];
    // Crear objeto con propiedades iniciales
    const obj = {...state, Persona: option.value };
    // Recorrer propiedades de atributos de datos para agregar a objeto
    Object.entries(option.dataset).forEach(entry => {
        // Separar nombre de propiedad y valor
        let [key, value] = entry;
        // Poner primera letra en mayúscula
        let property = key.charAt(0).toUpperCase() + key.slice(1);
        // Agregar propiedad al objeto
        obj[property] = value;
    });
    setState(obj);
}

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.