PT
React - formulário de aplicação
0
points
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.useRef
gancho para criar usernameRef
e passwordRef
que nos permite acessar os elementos de entrada HTML.
Em handleSubmit
funçã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
data
objeto que é convertido em JSON e exibido no console - podemos enviar esse JSON com AJAX para o backend também.
handleSubmit
A função é anexada à onSubmit
propriedade do evento que é disparada quando a ação de envio ocorre - quando o Submit
botã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 );