Do you want to switch to Platzi in English?
3

Manejo de Múltiples Inputs con React

Código de React para inputs, enjoy it!

  1. Crea una clase en react para tu input, simple, sin el input. https://codepen.io/eduardo-hidalgo/pen/KbxEzN
classFormComponentextendsReact.Component{
  render() {
    return (
      <div>hello world class</div>
    )
  }
}
  1. añadele tu input, y un botón de submit para testearlo. Deberás encapsular todos los elementos en un div, o en un Fragment (es más profesional, evitas el “div-hell”). https://codepen.io/eduardo-hidalgo/pen/bOxZre
classFormComponentextendsReact.Component{
  render() {
    return (
      <React.Fragment>
        <label>
          {'Name '} {/* el texto del label para poder tener un espacio */}
          <input type="text" name="name" />
        </label>
        <input type="submit" value="Submit" />
      </React.Fragment>
    )
  }
}
  1. añadele un poco de lógica para que puedas ver el texto de tu input. https://codepen.io/eduardo-hidalgo/pen/pqOBJV
//evento que recibe la información del inputhandleChange(e) { console.log(e.target.value) }
  
render() { ...
...
<input type="text" name="name" onChange={this.handleChange}/>
...

cuando escribes ves tu resultado en tiempo real en la consola:
1.PNG

  1. añadele un state a tu input, para guardar lo que escribes, servirá para el siguiente paso. https://codepen.io/eduardo-hidalgo/pen/roZbwb
classFormComponentextendsReact.Component{
  state = {
    value: ''
  }
...
  1. el state ahora puede guardar el testo de tu input, pero no lo hace. añade esa lógica, y validala con más lógica dentro del submit. https://codepen.io/eduardo-hidalgo/pen/roZbgN
// ahora tu input debe guardar el texto en el estadohandleChange(e) { this.setState({value: e.target.value}) }
// añade un evento que maneje el click del botón submit.handleSubmit() { console.log('submitted: ' + this.state.value) }

//añade lógica extra a tu input para que funcione
<input type="text" name="name" onChange={(e)=>this.handleChange(e)}/>
//por ultimo añadele su evento click al submit
<input type="submit" value="Submit" onClick={()=>this.handleSubmit()}/>
  1. ahora es momento de añadir un segundo input. Aqui modificaré los nombres de algunas cosas para que tenga sentido. https://codepen.io/eduardo-hidalgo/pen/wREbJN
 state = {
    name: '',
    lastName: ''
  }

  handleName(e) { this.setState({name: e.target.value}) }
  handleLastName(e) { this.setState({lastName: e.target.value}) }

  handleSubmit() { 
    console.log('name: ' + this.state.name);
    console.log('lastname: ' + this.state.lastName);
  }
...
//y dentro del fragmento ponemos esto:
<label>
   {'Name '}
   <input type="text" name="name" onChange={(e)=>this.handleName(e)}/>
</label>
<label>
   {'LastName '}
   <input type="text" name="name" onChange={(e)=>this.handleLastName(e)}/>
</label>

el resultado es:
2.PNG

listo! ya puedes manejar el texto de dos inputs.

Escribe tu comentario
+ 2
2
10Puntos

muy buen ejemplo, cuando hay un 2 o mas imput, puedes dejar solo la funcion handleChange, pero te tienes que asegurar que el name de cada imput coincida con el del state:

state = {
	user:{
		name: '',
		lastName: ''
	}
}

handleChange(e) {
	let user = this.state.user;
	user[e.target.name]=e.target.value;
	this.setState({user:user})
}


  handleSubmit() { 
    console.log('name: ' + this.state.user.name);
    console.log('lastname: ' + this.state.user.lastName);
  }
...

<label>
	{'Name '}
	<input type="text" name="name" onChange{(e)=>this.handleChange(e)}/>
</label><label>
	{'LastName '}
	<input type="text" name="lastName" onChange{(e)=>this.handleChange(e)}/>
</label>