Solucionado (ver solução)
Solucionado
(ver solução)
1
resposta

até então a minha linha de programção está conforme o anexo enviado asseguir, compila normalmente, mais não aceita nenhuma alteração nele(no caso ele não escreve nada no localhost).

import React, { useState } from "react";
import { TextField, Button, Switch, FormControlLabel } from "@material-ui/core";

function FormularioCadastro({aoEnviar}) {
  const [nome, setNome] = useState("");
  const [sobrenome, setSobrenome] = useState("");
  const [CPF, setCpf] = useState("");
  const [promocoes, setPromocoes] = useState(true);
  const [novidades, setNovidades] = useState(true);


  return (
    <form
      onSubmit={(event) => {
        event.preventDefault();
        aoEnviar({nome, sobrenome, CPF, novidades, promocoes}); 
      }}
    >
      <TextField
        value={nome}
        OnChange={(event) => {
          setNome(event.target.value);
        }}
        id="Nome"
        label="Nome"
        variant="outlined"
        margin="normal"
        fullWidth
      />
      <TextField
        value={sobrenome}
        OnChange={(event) => {
          setSobrenome(event.target.value);
        }}
        id="Sobrenome"
        label="Sobrenome"
        variant="outlined"
        margin="normal"
        fullWidth
      />
      <TextField
        value={CPF}
        OnChange={(event) => {
          setCpf(event.target.value);
        }}
        id="CPF"
        label="CPF"
        variant="outlined"
        margin="normal"
        fullWidth
      />
      <FormControlLabel
        label="Promoções"
        control={
          <Switch
          checked={promocoes}
            onChange={(event) => {
              setPromocoes(event.target.checked);
            }}
            name="Promocoes"
            color="primary"
          />
        }
      />
      <FormControlLabel
        label="Novidades"
        control={
          <Switch
          checked={novidades}
            onChange={(event) => {
              setNovidades(event.target.checked);
            }}
            name="Novidades"
            color="primary"
          />
        }
      />
      <Button type="submit" variant="contained" color="primary">
        Cadastrar
      </Button>
    </form>
  );
}

export default FormularioCadastro;
1 resposta
solução!

Oi Alan!

Nos seus componentes <TextField /> você acabou utilizando OnChange em vez de onChange. Ou seja, quando você digita algo no <TextField> ele dispara o evento onClick, mas nada acontece, pois nenhuma função foi associada a ele.

Mude seu código de:

      <TextField
        value={nome}
        OnChange={(event) => {
          setNome(event.target.value);
        }}
        id="Nome"
        label="Nome"
        variant="outlined"
        margin="normal"
        fullWidth
      />

Para

      <TextField
        value={nome}
        onChange={(event) => { // mude esta linha
          setNome(event.target.value);
        }}
        id="Nome"
        label="Nome"
        variant="outlined"
        margin="normal"
        fullWidth
      />

E comenta aqui se deu certo!

Espero ter ajudado!

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