¿Cómo manejar múltiples campos de entrada en forma de reacción con una sola función?

Posted on by Rudeus Greyrat

Hay dos tipos de forma, una es la forma no controlada y otra es la forma controlada. En forma no controlada, los valores del campo de entrada se almacenan en DOM y siempre que queramos usar los valores, tenemos que llegar al DOM y extraer los valores de cada campo de entrada. Ahora en control, no permitimos almacenar el valor en DOM, pero los valores se almacenan como un estado del componente de reacción y se actualizan dinámicamente con la interacción del usuario. Para esto, usamos el controlador de eventos onChangey ejecuta una devolución de llamada que actualiza los valores de estado. Ahora, para un solo campo de entrada, usamos una devolución de llamada handleChange, pero si los campos de entrada son múltiples, entonces tenemos que crear varias devoluciones de llamada handleChange para actualizar el estado de cada campo de entrada. Afortunadamente, este no es el caso. JavaScript nos proporciona la sintaxis moderna ES2015 para ejecutar este tipo de trabajo complicado de una manera sencilla.

ES2015 introdujo la capacidad de crear objetos con claves dinámicas basadas en expresiones de JavaScript denominadas nombres de propiedades calculadas . Usamos nombres de propiedad calculados para actualizar el estado de todos los campos de entrada en función del atributo de nombre de las entradas. 

Sintaxis: 

const obj = {
   : value
}

Ejemplo 1: este ejemplo muestra cómo manejar múltiples campos de entrada de formulario con una sola función handleChange.

  • índice.js:

    JavaScript

    import React from 'react'
    import ReactDOM from 'react-dom'
    import App from './App'
      
    ReactDOM.render(<App />, document.querySelector('#root'))

  • App.js: el componente de la aplicación representa solo un componente de formulario

    JavaScript

    import React from 'react'
    import Form from './Form'
      
    //Functional component
    const App =() => {
      //render single App component
      return(
        <Form />
      )
    }
      
    export default App

  • Form.js: el componente de formulario representa un formulario y contiene toda la lógica para que sea un formulario controlado y el envío del formulario.

    JavaScript

    import React,{ Component } from 'react'
      
    class Form extends Component{
      constructor(props){
        super(props)
        this.state = { email:'',name:'', age:null, address:'',phoneNo:''}
        this.handleChange = this.handleChange.bind(this)
        this.handleSubmit = this.handleSubmit.bind(this)
      }
      
      // Form submitting logic, prevent default page refresh 
      handleSubmit(event){
        const { email, name, age, address, phoneNo } = this.state
        event.preventDefault()
        alert(`
          ____Your Details____\n
          Email : ${email}
          Name : ${name}
          Age : ${age}
          Address : ${address}
          Phone No : ${phoneNo}
        `)
      }
      
      // Method causes to store all the values of the 
      // input field in react state single method handle 
      // input changes of all the input field using ES6 
      // javascript feature computed property names
      handleChange(event){
        this.setState({
          // Computed property names
          // keys of the objects are computed dynamically
          [event.target.name] : event.target.value
        })
      }
      
      // Return a controlled form i.e. values of the 
      // input field not stored in DOM values are exist 
      // in react component itself as state
      render(){
        return(
          <form onSubmit={this.handleSubmit}>
            <div>
              <label htmlFor='email'>Email</label>
              <input 
                name='email'
                placeholder='Email' 
                value = {this.state.email}
                onChange={this.handleChange}
              />
            </div>
            <div>
              <label htmlFor='name'>Name</label>
              <input
                name='name' 
                placeholder='Name'
                value={this.state.name}
                onChange={this.handleChange}
              />
            </div>
            <div>
              <label htmlFor='age'>Age</label>
              <input
                name='age' 
                placeholder='Age'
                value={this.state.age}
                onChange={this.handleChange}
              />
            </div>
            <div>
              <label htmlFor='address'>Address</label>
              <input
                name='address' 
                placeholder='Address'
                value={this.state.address}
                onChange={this.handleChange}
              />
            </div>
            <div>
              <label htmlFor='phoneNo'>Phone Number</label>
              <input
                name='phoneNo' 
                placeholder='Phone No'
                value={this.state.phoneNo}
                onChange={this.handleChange}
              />
            </div>
            <div>
              <button>Create Account</button>
            </div>
          </form>
        )
      }
    }
      
    export default Form

Producción :

Ejemplo 2: 

  • índice.js:

    JavaScript

    import React from 'react'
    import ReactDOM from 'react-dom'
    import App from './App'
      
    ReactDOM.render(<App />, document.querySelector('#root'))

  • App.js: el componente de la aplicación representa solo un componente BoxList

    JavaScript

    import React from 'react';
    import BoxList from './BoxList'
      
    const App =() => {
      //App renders single BoxList component
      return(
        <BoxList />
      )
    }
      
    export default App

  • BoxList.js: Contiene todo lo que hay detrás de la lógica. Es un componente con estado. Hay un solo estado que contiene una serie de cajas. Mapeamos sobre cada cuadro de ‘cuadros’ de estado y para cada cuadro representamos un componente ‘Cuadro’. El componente BoxList también contiene métodos create que son responsables de crear cuadros en función de las propiedades dadas. BoxComponent también representa ‘NewBoxForm’ que muestra un formulario al usuario para ingresar la altura, el ancho y el color de fondo del cuadro que desea crear. El componente BoxList pasa el método de creación al componente NewBoxForm como accesorio a cada componente ‘Box’ como accesorio. Luego, estos componentes se invocan con los métodos dados en el momento adecuado de acuerdo con las interacciones del usuario con la aplicación.

    JavaScript

    import React, { Component } from 'react'
    import { v4 as uuid } from 'uuid'
    import NewBoxForm from './NewBoxForm'
    import Box from './Box'
      
    class BoxList extends Component{
      constructor(props){
        super(props)
        // Single state boxes initialized with empty array
        // it contains all the created boxes and their properties
        this.state = { boxes : [] }
        this.createBox = this.createBox.bind(this)
      }
      
      // create new box and added it to boxes state
      createBox(attrs){
        const newBox = { ...attrs, id : uuid()}
        this.setState({
          boxes : [...this.state.boxes, newBox]
        })
      }
      
      // Map over each box in boxes state and render a 
      // Box component for each passing its property as
      // props and method is also passed as props which gets 
      // called by the handler callback of Box component
      renderBoxes(){
        return this.state.boxes.map(box => (
          <Box key={box.id} attrs={box} />
        ))
      }
        
      render(){
        return(
          <div>
            <h1>Make New Color Boxes!</h1>
            {/* component to create form  
                and passes create method as */}
            <NewBoxForm create={this.createBox}/>
            {this.renderBoxes()}
          </div>
        )
      }
    }
      
    export default BoxList

  • NewBoxForm.js: Este componente se encarga de mostrar el formulario a los usuarios para ingresar las propiedades del cuadro que querían crear. El formulario es un formulario controlado, es decir, almacena los valores del campo de entrada en estados y los actualiza en tiempo real de acuerdo con la interacción del usuario con los campos de entrada del formulario. Invocó la devolución de llamada de envío de manejo después de enviar el formulario que, a cambio, invoca el método de creación del componente BoxList pasando los valores del formulario para crear el cuadro.

    JavaScript

    import React,{ Component } from 'react'
      
    class NewBoxForm extends Component{
      constructor(props){
        super(props)
        this.state = { height : 0, width : 0, bc : ''}
        this.handleChange = this.handleChange.bind(this)
        this.handleSubmit = this.handleSubmit.bind(this)
      }
      
      // Form submitting logic, prevent default page 
      // refresh and call create method of BoxList
      // component to create new box
      handleSubmit(event){
        event.preventDefault()
        this.props.create(this.state)
        this.setState({ height : 0, width : 0, bc : ''})
      }
      
      // Method causes to store all the values of the 
      // input field in react state using single method 
      // handleChanges of all the input field
      // using ES6 javascript feature computed property names
      handleChange(event){
        this.setState({
          [event.target.name] : event.target.value
        })
      }
      
      // return a form using which we add box properties 
      // to create Boxes. It is controlled form i.e. values 
      // of the input field not stored in DOM values are exist
      // in react component itself as state
      
      render(){
        return(
          <form onSubmit={this.handleSubmit}>
            <div>
              <label htmlFor='height'>Height</label>
              <input 
                name='height'
                placeholder='Height' 
                value = {this.state.height}
                onChange={this.handleChange}
              />
            </div>
            <div>
              <label htmlFor='width'>Width</label>
              <input
                name='width' 
                placeholder='Width'
                value={this.state.width}
                onChange={this.handleChange}
              />
            </div>
            <div>
              <label htmlFor='bc'>Background Color</label>
              <input
                name='bc' 
                placeholder='Background Color'
                value={this.state.bc}
                onChange={this.handleChange}
              />
            </div>
            <div>
              <button>Add a new Box!</button>
            </div>
          </form>
        )
      }
    }
      
    export default NewBoxForm

  • Box.js: Se encarga de mostrar cada caja con su altura, ancho y color adecuados en el fondo. 

    JavaScript

    import React, { Component } from 'react'
      
    class Box extends Component {
      render(){
        const { height, width, bc } = this.props.attrs
        const style = { width: `${width}em`, height:`${height}em`, backgroundColor:bc}
        return(
          <div style={style} />
        )
      }
    }
      
    export default Box

Producción :

Publicación traducida automáticamente

Artículo escrito por hunter__js y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *