Olá professores!
Tenho passado por um erro em que quando importo os tipos de valor de input de CampoTexto para o Formulario eu obtenho esses erros:
Quando vejo o que é o nosso tipo dentro do index.tsx de Formulario ele está como "any"
Creio que há diferenças entre o ts.config, porém não tenho certeza. Aqui está meu código:
Formulario
import { useState } from 'react'
import { IColaborador } from '../../compartilhado/interfaces/IColaborador'
import Botao from '../Botao'
import CampoTexto from '../CampoTexto'
import ListaSuspensa from '../ListaSuspensa'
import './Formulario.css'
interface FormularioProps {
aoColaboradorCadastrado: (colaborador: IColaborador) => void
times: string[]
}
const Formulario = (props: FormularioProps) => {
const [nome, setNome] = useState('')
const [cargo, setCargo] = useState('')
const [imagem, setImagem] = useState('')
const [time, setTime] = useState('')
const [data, setData] = useState('')
const aoSalvar = (evento: React.FormEvent<HTMLFormElement> ) => {
evento.preventDefault()
props.aoColaboradorCadastrado({
nome,
cargo,
imagem,
time
})
setNome('')
setCargo('')
setImagem('')
setTime('')
}
return (
<section className="formulario">
<form onSubmit={evento => aoSalvar(evento)}>
<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)}
/>
<CampoTexto
label="Data de entrada no time"
placeholder=""
valor={data}
aoAlterado={valor => setData(valor)}
/>
<ListaSuspensa
obrigatorio={true}
label="Time"
itens={props.times}
valor={time}
aoAlterado={valor => setTime(valor)}
type = {tipo}
/>
<Botao>
Criar Card
</Botao>
</form>
</section>
)
}
export default Formulario
CampoTexto
import React from 'react'
import './CampoTexto.css'
interface CampoTextoProps {
aoAlterado: (valor: string) => void
placeholder: string
label: string
valor: string
obrigatorio?: boolean
tipo?: 'text' | 'email' | 'date' | 'number' | 'password'
}
const CampoTexto = ({ aoAlterado, label, obrigatorio, placeholder, valor, tipo = 'text' } : CampoTextoProps) => {
const placeholderModificada = `${placeholder}...`
const aoDigitado = (evento: React.ChangeEvent<HTMLInputElement>) => {
aoAlterado(evento.target.value)
}
return (
<div className="campo-texto">
<label>
{label}
</label>
<input
value={valor}
onChange={aoDigitado}
required={obrigatorio}
placeholder={placeholderModificada}
type={tipo}
/>
</div>
)
}
export default CampoTexto
Obrigado!