Hola soy nuevo en esto de React
pero tengo una duda con los parámetros, solo quiero quiero imprimir nombre y edad en cuanto el input
cambie de estado, al ingresar la edad en el segundo input
modifica el nombre y no la edad, porque me sucede esto ? O como puedo agregar el segundo parámetro al Header
.
Quisiera algo parecido a esto:
class Mensaje extends React.Component {
constructor (props) {
super(props);
this.state = {name: ''}; this.state = {edad:''};
this.cambioNombre = this.cambioNombre.bind(this);
this.cambioEdad = this.cambioEdad.bind(this);
}
cambioNombre(name) {this.setState({name}); }
cambioEdad(edad) {this.setState({edad}); }
render () { return ( <div>
<Header name={this.state.name} />
<Input cambioNombre={this.cambioNombre} cambioEdad={this.cambioEdad}/>
</div> );
}
}
const Header = (props) => {
return(
<div className="hi">
<h3>Hello, {props.name || "visitor"}, tu edad es {props.edad || "100 años"}!</h3>
</div>
);
}
class Input extends React.Component {
constructor() {super(); this.state = {input:''} }
nombreChange(e) {const name = e.target.value;
this.setState({input:name});
this.props.cambioNombre(name); }
render() {
return(<div>
<input placeholder='introduce tu nombre' type='text'
name={this.state.name} onChange={this.nombreChange.bind(this)}>
</input>
<br></br>
<input placeholder='introduce tu edad' type='text'
name={this.state.name} onChange={this.nombreChange.bind(this)}>
</input>
</div>);
}
}