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

class FormComponent extends React.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

class FormComponent extends React.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 input
handleChange(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. añadele un state a tu input, para guardar lo que escribes, servirá para el siguiente paso. https://codepen.io/eduardo-hidalgo/pen/roZbwb

class FormComponent extends React.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 estado
handleChange(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:

listo! ya puedes manejar el texto de dos inputs.