import React, { Component } from 'react'
class Alumno extends React.Component {
constructor(props) {
super(props);
this.state = { nombre: '', nota:0 };
}
cambioValores = (event) => {
let nombreInput=event.target.name;
let valorInput=event.target.value;
this.setState({[nombreInput]: valorInput});
}
render() {
return (
<form>
<h1>Hola {this.state.nombre}</h1>
<p>Tienes una nota de {this.state.nota}</p>
<input
type='text' name="nombre"
onChange={this.cambioValores}
/>
<input
type='text' name="nota"
onChange={this.cambioValores}
/>
</form>
);
}
}
export default function App() {
return <Alumno/>;
}
¿Os atrevéis a añadir una propiedad apellido con su input correspondiente y que lo muestre también en el h1?
import React, { Component } from 'react'
class Alumno extends React.Component {
constructor(props) {
super(props);
this.state = { nombre: '', apellidos:'',nota:0 };
}
cambioValores = (event) => {
let nombreInput=event.target.name;
let valorInput=event.target.value;
this.setState({[nombreInput]: valorInput});
}
render() {
return (
<form>
<h1>Hola {this.state.nombre} {this.state.apellidos}</h1>
<p>Tienes una nota de {this.state.nota}</p>
<input
type='text' name="nombre"
onChange={this.cambioValores}
/>
<input
type='text' name="apellidos"
onChange={this.cambioValores}
/>
<input
type='text' name="nota"
onChange={this.cambioValores}
/>
</form>
);
}
}
export default function App() {
return <Alumno/>;
}