1
resposta

[Bug] Ao validar o formulário o select não limpa os dados assim como o resto do formulario

No próprio vídeo do professor o select não limpa.

Componente: Formulario

import { useState } from 'react'
import Botao from '../Botao'
import CampoTexto from '../CampopTexto'
import ListaSuspensa from '../ListaSuspensa'
import './Formulario.css'

const Formulario = (props) => {

    //array com duas variaveis, definimos `nome` como 'vazio' e `setValor` como uma função para atualizar o estado. / useState= hook, variavel de estado
    const [nome, setNome] = useState('')
    const [cargo, setCargo] = useState('')
    const [imagem, setImagem] = useState('')
    const [time, setTime] = useState('')


    //Estado formulario
    const aoSalvar = (evento) => {
        debugger
        evento.preventDefault() //previnindo o comportamento padrão de recarregar a pag
        props.colaboradorCadastrado({ //Passando objeto para App
            nome: nome,
            cargo: cargo,
            imagem: imagem,
            time: time
        })
        //Limpando formulario
        setNome('')
        setCargo('')
        setImagem('')
        setTime('')

    }

    return (
        <section className='formulario'>
            <form onSubmit={aoSalvar}> {/*aoSalvar escutando o formulario*/}
                <h2>Preencha os dados para criar o card do colaborador</h2>
                <CampoTexto
                    obrigatorio={true}
                    label="Nome"
                    placeholder="Digite seu nome"
                    valor={nome}
                    aoAlterado={valor => setNome(valor)}
                />
                <CampoTexto
                    obrigatorio={true}
                    label="Cargo"
                    placeholder="Digite seu cargo"
                    valor={cargo}
                    aoAlterado={valor => setCargo(valor)}
                />
                <CampoTexto
                    label="Imagem"
                    placeholder="Digite o endereço da imagem"
                    valor={imagem}
                    aoAlterado={valor => setImagem(valor)}
                />
                <ListaSuspensa
                    obrigatorio={true}
                    label='Times'
                    itens={props.times}
                    valor={time}
                    listaAlterada={valor => setTime(valor)}
                />
                <Botao>Criar Card</Botao>
            </form>
        </section>

    )
}

export default Formulario
1 resposta

Ola não é bug, é uma feature deixada pra que pratiquemos!

Quer mergulhar em tecnologia e aprendizagem?

Receba a newsletter que o nosso CEO escreve pessoalmente, com insights do mercado de trabalho, ciência e desenvolvimento de software