Languages
[Edit]
PT

React - formulário de aplicação

0 points
Created by:
Dirask JS Member
3430

TODO: the article has been machine translated

Neste artigo, gostar├şamos de mostrar como enviar um formul├írio no React .

No exemplo a seguir, acessamos os campos do formulário com referências - usamos o React.useRefgancho para criar usernameRefe passwordRef que nos permite acessar os elementos de entrada HTML.

Em handleSubmitfun├ž├úo, n├│s:

  • bloquear a realodifica├ž├úo da p├ígina com o preventDefault()m├ętodo,
  • use as refer├¬ncias para obter valores de campo e criar dataobjeto que ├ę convertido em JSON ┬áe exibido no console - podemos enviar esse JSON com AJAX para o backend tamb├ęm.

handleSubmit┬á A fun├ž├úo ├ę anexada ├á┬á onSubmitpropriedade do evento que ├ę disparada quando a a├ž├úo de envio ocorre - quando o Submitbot├úo ├ę clicado.

// ONLINE-RUNNER:browser;

// Nota: Descomente as linhas de importa├ž├úo durante o trabalho com o JSX Compiler.
// import React from 'react';
// import ReactDOM from 'react-dom';

const Form = () => {
  const usernameRef = React.useRef();
  const passwordRef = React.useRef();
  const handleSubmit = e => {
    e.preventDefault();
    const data = {
      username: usernameRef.current.value,
      password: passwordRef.current.value
    };
    const json = JSON.stringify(data, null, 4);
    console.clear();
    console.log(json);
  };
  return (
    <form onSubmit={handleSubmit}>
      <div>
        <label>Username: </label>
        <input type="text" ref={usernameRef} />
      </div>
      <div>
        <label>Password: </label>
        <input type="password" ref={passwordRef} />
      </div>
      <button type="submit">Submit</button>
    </form>
  );
};

const root = document.querySelector('#root');
ReactDOM.render(<Form />, root );
Native Advertising
­čÜÇ
Get your tech brand or product in front of software developers.
For more information Contact us
Dirask - we help you to
solve coding problems.
Ask question.

ÔŁĄ´ŞĆ­čĺ╗ ­čÖé

Join