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.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.
xxxxxxxxxx1
// Nota: Descomente as linhas de importação durante o trabalho com o JSX Compiler.2
// import React from 'react';3
// import ReactDOM from 'react-dom';4
5
const Form = () => {6
const usernameRef = React.useRef();7
const passwordRef = React.useRef();8
const handleSubmit = e => {9
e.preventDefault();10
const data = {11
username: usernameRef.current.value,12
password: passwordRef.current.value13
};14
const json = JSON.stringify(data, null, 4);15
console.clear();16
console.log(json);17
};18
return (19
<form onSubmit={handleSubmit}>20
<div>21
<label>Username: </label>22
<input type="text" ref={usernameRef} />23
</div>24
<div>25
<label>Password: </label>26
<input type="password" ref={passwordRef} />27
</div>28
<button type="submit">Submit</button>29
</form>30
);31
};32
33
const root = document.querySelector('#root');34
ReactDOM.render(<Form />, root );