Otra forma sencilla es usar el e.target.name

hace 3 años
1
2class Formulario extends Component {
3  constructor(props) {
4    super(props);
5    this.state = { nombre: &#39;&#39;, correo: &#39;&#39; };
6    // this.cambiarNombre = this.cambiarNombre.bind(this);
7  }
8
9  //   cambiarNombre(e) {
10  //     console.log(e.target.value);
11  //     console.log(this);
12  //     this.setState({
13  //       nombre: e.target.value,
14  //     });
15  //   }
16
17  handleChange = (e) =&gt; {
18    this.setState({
19      [e.target.name]: e.target.value,
20    });
21  };
22
23  render() {
24    return (
25      &lt;div className=&#39;ed-grid&#39;&gt;
26        &lt;h1&gt;Formulario&lt;/h1&gt;
27        &lt;form&gt;
28          &lt;div className=&#39;ed-grid m-grid-2&#39;&gt;
29            &lt;div className=&#39;form__item&#39;&gt;
30              &lt;label htmlFor=&#39;nombre&#39;&gt;Nombre Completo&lt;/label&gt;
31              &lt;input type=&#39;text&#39; name=&#39;nombre&#39; onChange={this.handleChange} /&gt;
32            &lt;/div&gt;
33            &lt;div className=&#39;form__item&#39;&gt;
34              &lt;label htmlFor=&#39;email&#39;&gt;Correo electronico&lt;/label&gt;
35              &lt;input type=&#39;email&#39; name=&#39;correo&#39; onChange={this.handleChange} /&gt;
36            &lt;/div&gt;
37            {/* &lt;div className=&#39;form__item&#39;&gt;
38            &lt;button className=&#39;button full&#39; type=&#39;subimit&#39;&gt;
39              Enviar
40            &lt;/button&gt;
41          &lt;/div&gt; */}
42          &lt;/div&gt;
43        &lt;/form&gt;
44        &lt;div&gt;
45          &lt;h2&gt;{`Hola ${this.state.nombre}`}&lt;/h2&gt;
46          &lt;span&gt;{`Tu correo es ${this.state.correo}`}&lt;/span&gt;
47        &lt;/div&gt;
48      &lt;/div&gt;
49    );
50  }
51}
52
53export default Formulario;
Escribe una respuesta