ReactJS - Formularios

En este capítulo, aprenderemos cómo usar formularios en React.

Ejemplo simple

En el siguiente ejemplo, estableceremos un formulario de entrada con value = {this.state.data}. Esto permite actualizar el estado cada vez que cambia el valor de entrada. Estamos usandoonChange evento que observará los cambios de entrada y actualizará el estado en consecuencia.

App.jsx

import React from 'react';

class App extends React.Component {
   constructor(props) {
      super(props);
      
      this.state = {
         data: 'Initial data...'
      }
      this.updateState = this.updateState.bind(this);
   };
   updateState(e) {
      this.setState({data: e.target.value});
   }
   render() {
      return (
         <div>
            <input type = "text" value = {this.state.data} 
               onChange = {this.updateState} />
            <h4>{this.state.data}</h4>
         </div>
      );
   }
}
export default App;

main.js

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App.jsx';

ReactDOM.render(<App/>, document.getElementById('app'));

Cuando cambie el valor del texto de entrada, el estado se actualizará.

Ejemplo complejo

En el siguiente ejemplo, veremos cómo usar formularios del componente hijo. onChange El método activará la actualización del estado que se pasará a la entrada secundaria valuey renderizado en la pantalla. Se utiliza un ejemplo similar en el capítulo Eventos. Siempre que necesitemos actualizar el estado del componente secundario, debemos pasar la función que manejará la actualización (updateState) como accesorio (updateStateProp).

App.jsx

import React from 'react';

class App extends React.Component {
   constructor(props) {
      super(props);
      
      this.state = {
         data: 'Initial data...'
      }
      this.updateState = this.updateState.bind(this);
   };
   updateState(e) {
      this.setState({data: e.target.value});
   }
   render() {
      return (
         <div>
            <Content myDataProp = {this.state.data} 
               updateStateProp = {this.updateState}></Content>
         </div>
      );
   }
}
class Content extends React.Component {
   render() {
      return (
         <div>
            <input type = "text" value = {this.props.myDataProp} 
               onChange = {this.props.updateStateProp} />
            <h3>{this.props.myDataProp}</h3>
         </div>
      );
   }
}
export default App;

main.js

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App.jsx';

ReactDOM.render(<App/>, document.getElementById('app'));

Esto producirá el siguiente resultado.