Podemos pasar una función que establece el estado del componente principal al secundario como accesorio.
Creando la aplicación React:
Paso 1: Cree una aplicación React usando el siguiente comando:
npx create-react-app foldername
Paso 2: después de crear la carpeta de su proyecto, es decir , el nombre de la carpeta , acceda a ella con el siguiente comando:
cd foldername
Estructura del proyecto: Tendrá el siguiente aspecto.
Estructura del proyecto
Nombre de archivo: App.js
Javascript
import React, { Component } from "react";
class App extends Component {
state = {
text: 'click me'
}
// Function to update state
handleUpdate = (newtext) => {
this.setState({ text: newtext })
}
render() {
return (
<div>
<Child
text={this.state.text}
// Passing a function to child
updateState={this.handleUpdate}>
</Child>
</div>
);
}
}
class Child extends Component {
render() {
return (
<button
// Using parent props to update parent state
onClick={() => this.props
.updateState('parent state changed')}>
{this.props.text}
</button>
)
}
}
export default App;
Paso para ejecutar la aplicación: ejecute la aplicación utilizando el siguiente comando desde el directorio raíz del proyecto:
npm start
Salida: Verá el siguiente botón en la pantalla:
Antes de hacer clic
Después de hacer clic en el botón, el siguiente será el resultado:
Después de hacer clic
Publicación traducida automáticamente
Artículo escrito por KapilChhipa y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA