0a1eeea424
* fix: replace sh with shell fix replace terminal with shell fix replace node with js fix replace output with shell fix replace cs with csharp fix replace c++ with cpp fix replace c# with csharp fix replace javasctipt with js fix replace syntax with js fix replace unix with shell fix replace linux with shell fix replace java 8 with java fix replace swift4 with swift fix replace react.js with jsx fix replace javascriot with js fix replace javacsript with js fix replace c++ - with cpp fix: corrected various typos fix: replace Algorithm with nothing fix: replace xaml with xml fix: replace solidity with nothing fix: replace c++ with cpp fix: replace txt with shell fix: replace code with json and css fix: replace console with shell
1.7 KiB
title, localeTitle
| title | localeTitle |
|---|---|
| Create a Controlled Form | Crear un formulario controlado |
Crear un formulario controlado
Crear una forma controlada es el mismo proceso que crear una entrada controlada, excepto que necesita manejar un evento de envío.
Primero, cree una entrada controlada que almacene su valor en el estado, de modo que haya una única fuente de verdad. (Esto es lo que hizo en el desafío anterior). Cree un elemento de entrada, establezca su atributo de valor en la variable de entrada ubicada en el estado. Recuerde, el estado puede ser accedido por this.state . A continuación, establezca el atributo onChange del elemento de onChange para llamar a la función 'handleChange'.
Solución
<input value={this.state.input} onChange={this.handleChange}/>
A continuación, cree el método handleSubmit para su componente. Primero, debido a que su formulario se está enviando, tendrá que evitar que la página se actualice. Segundo, llame al método setState() , pasando un objeto de los diferentes pares clave-valor que desea cambiar. En este caso, desea establecer 'enviar' al valor de la variable 'entrada' y establecer 'entrada' a una cadena vacía.
handleSubmit(event) {
event.preventDefault();
this.setState({
input: '',
submit: this.state.input
});
}
Ahora que sus datos se están manejando en estado, podemos usar estos datos. Crear un elemento h1 . Dentro de su elemento h1 ponga su variable 'submit'. Recuerde, 'enviar' se encuentra dentro del estado, por lo que deberá usar this.state . Además, colocar la variable dentro de JSX requiere llaves { } porque es JavaScript.
<h1>{this.state.submit}</h1>