Skip to main content
adicionou 5561 caracteres ao conteúdo
Fonte Link
Myag
  • 11
  • 2
export default function Home() {

  const initialValue = {
    nome: '',
    sobrenome: '',
    email: '',
    endereco: '',
    numero: '',
    cidade: '',
    bairro: '',
    cep: '',
    numCelular: '',
    numTelefone: '',
  }

  const [values, setValues] = useState(initialValue);
 

  function onChange(evento) {
    const { name, value } = evento.target;
    setValues({ ...values, [name]: value })
  

  }

  function onSubmit(evento) {
    evento.preventDefault();
    /*     fetch('http://127.0.0.1:8000/clientes/')
        .then(function(res){ 
          return res.json()
        }).then(function (resConvertida){
          console.log(resConvertida)
        }) */

    fetch('http://127.0.0.1:8000/clientes/', {
      method: "POST",
      headers: {
        'Content-Type': 'application/json',
      },
      body: JSON.stringify(values)
      
    })
      .then(response => response.json())
      .then((response) => {
        console.log(response.message);        
      })
         
  } 


  return (
    <div>
      <div>
        <Head>
          <title>Restaurante App</title>
          <meta name='description' content='App de Pedidos em Restaurantes' />
          <meta name='author' content='AgnaldoCordeiro' />
          <link rel="icon" href="/favicon.ico" />
        </Head>
      </div>
      <div>
        <Menu />
      </div>
      <div className={styles.container}>
        <Jumbotron fluid className="conteudo">
          <style>{`.conteudo{
          padding-top: 80px;
          padding-bottom: 80px;
          background-color: black;
          color: white;
          margin-bottom: 0rem !important;          
        }`}</style>
          <Container>
            <h1 className="display-3">App Restaurante</h1>
            <div className="mb-2">
              <form className="row g-3" onSubmit={onSubmit}>
                <div className="col-md-4">
                  <label htmlFor="inputNome" className="form-label">Nome</label>
                  <input type="text" className="form-control" id="inputNome" name="nome" onChange={onChange} />
                </div>
                <div className="col-md-4">
                  <label htmlFor="inputSobrenome" className="form-label">Sobrenome</label>
                  <input type="text" className="form-control" id="inputSobrenome" name="sobrenome" onChange={onChange} />
                </div>
                <div className="col-md-4">
                  <label htmlFor="inputCPF" className="form-label" >CPF</label>
                  <input type="text" className="form-control" id="inputCPF" name="cpf" onChange={onChange} />
                </div>
                <div className="col-md-3">
                  <label htmlFor="inputEmail4" className="form-label" >Email</label>
                  <input type="email" className="form-control" id="inputEmail4" name="email" onChange={onChange} />
                </div>
                <div className="col-md-8">
                  <label htmlFor="inputEndereco" className="form-label" >Endereço</label>
                  <input type="text" className="form-control" id="inputEndereco" name="endereco" placeholder="Apartment, studio, or floor" onChange={onChange} />
                </div>
                <div className="col-md-1">
                  <label htmlFor="inputNum" className="form-label" >Numero</label>
                  <input type="text" className="form-control" id="inputNum" name="numero" onChange={onChange} />
                </div>
                <div className="col-md-3">
                  <label htmlFor="inputCidade" className="form-label" >Cidade</label>
                  <input id="text" className="form-control" id="inputCidade" name="cidade" onChange={onChange} />
                </div>
                <div className="col-md-3">
                  <label htmlFor="inputBairro" className="form-label">Bairro</label>
                  <input type="text" className="form-control" id="inputBairro" name="bairro" onChange={onChange} />
                </div>
                <div className="col-2">
                  <label htmlFor="inputCEP" className="form-label">CEP</label>
                  <input type="text" className="form-control" id="inputCEP" name="cep" onChange={onChange} />
                </div>
                <div className="col-2">
                  <label htmlFor="inputCelular" className="form-label">Celular</label>
                  <input type="tel" className="form-control" id="inputnumCelular" placeholder="(DDD);00000-0000" name="numCelular" onChange={onChange} />
                </div>
                <div className="col-2">
                  <label htmlFor="inputTelefone" className="form-label">Telefone</label>
                  <input type="tel" className="form-control" id="inputnumTelefone" placeholder="(DDD)0000-0000" name="numTelefone" onChange={onChange} />
                </div>
                <div className="text-center">
                  <div className="form-check" className="align-content-center">
                    <input className="form-check-input" type="checkbox" value="" id="invalidCheck" required />
                    <label className="form-check-label" for="invalidCheck">
                      Aceite os termos e condições
                    </label>
                    <div className="invalid-feedback">
                      You must agree before submitting.
                    </div>
                  </div>
                  <div className="col-12">
                    <button type="submit" className="btn btn-primary">Cadastrar</button>
                  </div>

                </div>

              </form>
            </div>

          </Container>
          <Container className="text-center">
            <p className="lead">App de restaurante desenvolvido.</p>
            <hr className="my-2" />
            <p>Modo de Desenvolvimento.</p>
          </Container>

        </Jumbotron>
        <Footer />
      </div>

    </div>`insira o código aqui`
const initialValue = {
    nome: '',
    sobrenome: '',
    email: '',
    endereco: '',
    numero: '',
    cidade: '',
    bairro: '',
    cep: '',
    numCelular: '',
    numTelefone: '',
  }

  const [values, setValues] = useState(initialValue);
 

  function onChange(evento) {
    const { name, value } = evento.target;
    setValues({ ...values, [name]: value })


  }

  function onSubmit(evento) {
    evento.preventDefault();
    /*     fetch('http://127.0.0.1:8000/clientes/')
        .then(function(res){ 
          return res.json()
        }).then(function (resConvertida){
          console.log(resConvertida)
        }) */

    fetch('http://127.0.0.1:8000/clientes/', {
      method: "POST",
      headers: {
        'Content-Type': 'application/json',
      },
      body: JSON.stringify(values)
    })
      .then(response => response.json())
      .then((response) => {
        console.log(response.message);
        
      });

      
  }
export default function Home() {

  const initialValue = {
    nome: '',
    sobrenome: '',
    email: '',
    endereco: '',
    numero: '',
    cidade: '',
    bairro: '',
    cep: '',
    numCelular: '',
    numTelefone: '',
  }

  const [values, setValues] = useState(initialValue);

  function onChange(evento) {
    const { name, value } = evento.target;
    setValues({ ...values, [name]: value })
  

  }

  function onSubmit(evento) {
    evento.preventDefault();
    /*     fetch('http://127.0.0.1:8000/clientes/')
        .then(function(res){ 
          return res.json()
        }).then(function (resConvertida){
          console.log(resConvertida)
        }) */

    fetch('http://127.0.0.1:8000/clientes/', {
      method: "POST",
      headers: {
        'Content-Type': 'application/json',
      },
      body: JSON.stringify(values)
      
    })
      .then(response => response.json())
      .then((response) => {
        console.log(response.message);        
      })
         
  } 


  return (
    <div>
      <div>
        <Head>
          <title>Restaurante App</title>
          <meta name='description' content='App de Pedidos em Restaurantes' />
          <meta name='author' content='AgnaldoCordeiro' />
          <link rel="icon" href="/favicon.ico" />
        </Head>
      </div>
      <div>
        <Menu />
      </div>
      <div className={styles.container}>
        <Jumbotron fluid className="conteudo">
          <style>{`.conteudo{
          padding-top: 80px;
          padding-bottom: 80px;
          background-color: black;
          color: white;
          margin-bottom: 0rem !important;          
        }`}</style>
          <Container>
            <h1 className="display-3">App Restaurante</h1>
            <div className="mb-2">
              <form className="row g-3" onSubmit={onSubmit}>
                <div className="col-md-4">
                  <label htmlFor="inputNome" className="form-label">Nome</label>
                  <input type="text" className="form-control" id="inputNome" name="nome" onChange={onChange} />
                </div>
                <div className="col-md-4">
                  <label htmlFor="inputSobrenome" className="form-label">Sobrenome</label>
                  <input type="text" className="form-control" id="inputSobrenome" name="sobrenome" onChange={onChange} />
                </div>
                <div className="col-md-4">
                  <label htmlFor="inputCPF" className="form-label" >CPF</label>
                  <input type="text" className="form-control" id="inputCPF" name="cpf" onChange={onChange} />
                </div>
                <div className="col-md-3">
                  <label htmlFor="inputEmail4" className="form-label" >Email</label>
                  <input type="email" className="form-control" id="inputEmail4" name="email" onChange={onChange} />
                </div>
                <div className="col-md-8">
                  <label htmlFor="inputEndereco" className="form-label" >Endereço</label>
                  <input type="text" className="form-control" id="inputEndereco" name="endereco" placeholder="Apartment, studio, or floor" onChange={onChange} />
                </div>
                <div className="col-md-1">
                  <label htmlFor="inputNum" className="form-label" >Numero</label>
                  <input type="text" className="form-control" id="inputNum" name="numero" onChange={onChange} />
                </div>
                <div className="col-md-3">
                  <label htmlFor="inputCidade" className="form-label" >Cidade</label>
                  <input id="text" className="form-control" id="inputCidade" name="cidade" onChange={onChange} />
                </div>
                <div className="col-md-3">
                  <label htmlFor="inputBairro" className="form-label">Bairro</label>
                  <input type="text" className="form-control" id="inputBairro" name="bairro" onChange={onChange} />
                </div>
                <div className="col-2">
                  <label htmlFor="inputCEP" className="form-label">CEP</label>
                  <input type="text" className="form-control" id="inputCEP" name="cep" onChange={onChange} />
                </div>
                <div className="col-2">
                  <label htmlFor="inputCelular" className="form-label">Celular</label>
                  <input type="tel" className="form-control" id="inputnumCelular" placeholder="(DDD)00000-0000" name="numCelular" onChange={onChange} />
                </div>
                <div className="col-2">
                  <label htmlFor="inputTelefone" className="form-label">Telefone</label>
                  <input type="tel" className="form-control" id="inputnumTelefone" placeholder="(DDD)0000-0000" name="numTelefone" onChange={onChange} />
                </div>
                <div className="text-center">
                  <div className="form-check" className="align-content-center">
                    <input className="form-check-input" type="checkbox" value="" id="invalidCheck" required />
                    <label className="form-check-label" for="invalidCheck">
                      Aceite os termos e condições
                    </label>
                    <div className="invalid-feedback">
                      You must agree before submitting.
                    </div>
                  </div>
                  <div className="col-12">
                    <button type="submit" className="btn btn-primary">Cadastrar</button>
                  </div>

                </div>

              </form>
            </div>

          </Container>
          <Container className="text-center">
            <p className="lead">App de restaurante desenvolvido.</p>
            <hr className="my-2" />
            <p>Modo de Desenvolvimento.</p>
          </Container>

        </Jumbotron>
        <Footer />
      </div>

    </div>`insira o código aqui`
adicionou 188 caracteres ao conteúdo
Fonte Link
Bins
  • 3,8mil
  • 2
  • 7
  • 10

Então pessoal estou com um problema, eu fiz um formalario que envia os dados do input pelo submit a uma API, porem não consigo limapr os dados aposso o submit.

const initialValue = { nome: '', sobrenome: '', email: '', endereco: '', numero: '', cidade: '', bairro: '', cep: '', numCelular: '', numTelefone: '', }

const [values, setValues] = useState(initialValue);

function onChange(evento) { const { name, value } = evento.target; setValues({ ...values, [name]: value })

}

function onSubmit(evento) { evento.preventDefault(); /* fetch('http://127.0.0.1:8000/clientes/') .then(function(res){ return res.json() }).then(function (resConvertida){ console.log(resConvertida) }) */

const initialValue = {
    nome: '',
    sobrenome: '',
    email: '',
    endereco: '',
    numero: '',
    cidade: '',
    bairro: '',
    cep: '',
    numCelular: '',
    numTelefone: '',
  }

  const [values, setValues] = useState(initialValue);


  function onChange(evento) {
    const { name, value } = evento.target;
    setValues({ ...values, [name]: value })


  }

  function onSubmit(evento) {
    evento.preventDefault();
    /*     fetch('http://127.0.0.1:8000/clientes/')
        .then(function(res){ 
          return res.json()
        }).then(function (resConvertida){
          console.log(resConvertida)
        }) */

    fetch('http://127.0.0.1:8000/clientes/', {
      method: "POST",
      headers: {
        'Content-Type': 'application/json',
      },
      body: JSON.stringify(values)
    })
      .then(response => response.json())
      .then((response) => {
        console.log(response.message);
        
      }); 

      
  }

}

Então pessoal estou com um problema, eu fiz um formalario que envia os dados do input pelo submit a uma API, porem não consigo limapr os dados aposso o submit.

const initialValue = { nome: '', sobrenome: '', email: '', endereco: '', numero: '', cidade: '', bairro: '', cep: '', numCelular: '', numTelefone: '', }

const [values, setValues] = useState(initialValue);

function onChange(evento) { const { name, value } = evento.target; setValues({ ...values, [name]: value })

}

function onSubmit(evento) { evento.preventDefault(); /* fetch('http://127.0.0.1:8000/clientes/') .then(function(res){ return res.json() }).then(function (resConvertida){ console.log(resConvertida) }) */

fetch('http://127.0.0.1:8000/clientes/', {
  method: "POST",
  headers: {
    'Content-Type': 'application/json',
  },
  body: JSON.stringify(values)
})
  .then(response => response.json())
  .then((response) => {
    console.log(response.message);
    
  });

  

}

Então pessoal estou com um problema, eu fiz um formalario que envia os dados do input pelo submit a uma API, porem não consigo limapr os dados aposso o submit.

const initialValue = {
    nome: '',
    sobrenome: '',
    email: '',
    endereco: '',
    numero: '',
    cidade: '',
    bairro: '',
    cep: '',
    numCelular: '',
    numTelefone: '',
  }

  const [values, setValues] = useState(initialValue);


  function onChange(evento) {
    const { name, value } = evento.target;
    setValues({ ...values, [name]: value })


  }

  function onSubmit(evento) {
    evento.preventDefault();
    /*     fetch('http://127.0.0.1:8000/clientes/')
        .then(function(res){ 
          return res.json()
        }).then(function (resConvertida){
          console.log(resConvertida)
        }) */

    fetch('http://127.0.0.1:8000/clientes/', {
      method: "POST",
      headers: {
        'Content-Type': 'application/json',
      },
      body: JSON.stringify(values)
    })
      .then(response => response.json())
      .then((response) => {
        console.log(response.message);
        
      }); 

      
  }
Fonte Link
Myag
  • 11
  • 2

Como Limpar Formalario no React

Então pessoal estou com um problema, eu fiz um formalario que envia os dados do input pelo submit a uma API, porem não consigo limapr os dados aposso o submit.

const initialValue = { nome: '', sobrenome: '', email: '', endereco: '', numero: '', cidade: '', bairro: '', cep: '', numCelular: '', numTelefone: '', }

const [values, setValues] = useState(initialValue);

function onChange(evento) { const { name, value } = evento.target; setValues({ ...values, [name]: value })

}

function onSubmit(evento) { evento.preventDefault(); /* fetch('http://127.0.0.1:8000/clientes/') .then(function(res){ return res.json() }).then(function (resConvertida){ console.log(resConvertida) }) */

fetch('http://127.0.0.1:8000/clientes/', {
  method: "POST",
  headers: {
    'Content-Type': 'application/json',
  },
  body: JSON.stringify(values)
})
  .then(response => response.json())
  .then((response) => {
    console.log(response.message);
    
  });

  

}