index.js Formulario
const Formulario = () => {
const times = [];
const [nome, setNome] = useState("");
const [cargo, setCargo] = useState("");
const [imagem, setImagem] = useState("");
const [time, setTime] = useState("");
const aoSalvar = (evento) => {
evento.preventDefault();
console.log("Form foi submetido =>", nome, cargo, imagem, time);
};
return (
<section className="formulario">
<form onSubmit={aoSalvar}>
<h2>Preencha os dados para craiar 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="Time"
itens={times}
valor={time}
aoAlterado={(valor) => setTime(valor)}
/>
<Botao>Criar Card</Botao>
</form>
</section>
);
};
export default Formulario;
index.js ListaSuspensa
const ListaSuspensa = (props) => {
return (
<div className='lista-suspensa'>
<label>{props.label}</label>
<select onChange={evento => props.aoAlterado(evento.target.value)} required={props.required} value={props.value}>
{props.itens.map(item => {
return <option key={item}>{item}</option>
})}
</select>
</div>
)
}
export default ListaSuspensa
index.js CampoTexto
const CampoTexto = (props) => {
const placeholderModificada = `${props.placeholder}...`
const aoDigitado = (evento) => {
props.aoAlterado(evento.target.value)
}
return (
<div className="campo-texto">
<label>
{props.label}
</label>
<input value={props.valor} onChange={aoDigitado} required={props.obrigatorio} placeholder={placeholderModificada}/>
</div>
)
}
export default CampoTexto