1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.

[ReactJS]

Discussão em 'Mobile' iniciado por Stack, Junho 5, 2021.

  1. Stack

    Stack Membro Participativo

    Fiz um onChange, só que parece que não está correto pois ele não está deixando eu editar, só ficar o valor do value.

    import React, { useState, useEffect } from 'react';

    import './index.css';

    export const HorarioFuncionamento = () => {
    const [horarios, setHorario] = useState([]);

    const [horariosFunc, setHorariosFunc] = useState({
    hor_inicio: '',
    hor_fim: '',
    hor_tempo_entrega_estimado: '',
    });

    const valueInput = e => setHorariosFunc({ ...horariosFunc, [e.target.name]: e.target.value });

    const getHorarioFuncionamento = async () => {
    const token = localStorage.getItem('token');

    const requestInfo = {
    method: 'GET',
    headers: new Headers({
    'Authorization': `Bearer ${token}`
    }),
    };

    fetch("http://localhost:8080/api/v1/horario-funcionamento", requestInfo, {
    setTimeout: 3000
    })
    .then(response => {
    if(response.ok) {
    return response.json();
    }
    throw new Error('Opss! Ocorreu um erro. :(');
    })
    .then((responseJson) => (
    setHorario(responseJson.horarios)
    ))
    .catch(e => console.log(e));
    }

    useEffect(() => {
    getHorarioFuncionamento();
    },[]);


    return(
    <form>
    <fieldset>
    {Object.values(horarios).map(horario => (
    <fieldset className="grupo">
    <div className="campo" hidden={true}>
    <label htmlFor="dia">HorUUID</label>
    <input type="text" id="dia" name="dia" style={{ width: '10em' }} value={ horario.horario_uuid } readOnly={true} />
    </div>
    <div className="campo">
    <label htmlFor="dia">Dia</label>
    <input type="text" id="dia" name="dia" style={{ width: '10em' }} value={ horario.hor_dia } readOnly={true} />
    </div>
    <div className="campo">
    <label htmlFor="hor-ini">Horário Ínicio</label>
    <input type="text" id="hor-ini" name="hor-ini" style={{ width: '10em' }} value={ horario.hor_inicio } onChange={ valueInput } />
    </div>
    <div className="campo">
    <label htmlFor="hor-fim">Horário Fim</label>
    <input type="text" id="hor-fim" name="hor-fim" style={{ width: '10em' }} value={ horario.hor_fim } onChange={ valueInput } />
    </div>
    <div className="campo">
    <label htmlFor="tem-entrega-estimado">Tempo de Entrega Estimado</label>
    <input type="text" id="tem-entrega-estimado" name="tem-entrega-estimado" style={{ width: '10em' }} value={ horario.hor_tempo_entrega_estimado } onChange={ valueInput } />
    </div>
    </fieldset>
    ))}
    </fieldset>
    </form>
    );
    }

    Continue reading...

Compartilhe esta Página