Как установить родительское состояние из дочернего компонента в ReactJS?
Мы можем установить родительское состояние из дочернего компонента в ReactJs, используя следующий подход.
Предпосылка: введение состояния в ReactJS
- Фактически мы установим состояние родительского элемента в самом родительском компоненте, но дочерние элементы будут нести ответственность за настройку.
- Мы создадим функцию в родительском элементе, чтобы установить состояние с заданным входом.
- Мы передадим эту функцию детям в качестве опоры.
- Затем Children вызовут функцию с новым значением.
- Мы установим состояние родителя в функции.
Создание приложения React:
Шаг 1. Создайте приложение React, используя следующую команду:
npx создать-реагировать-приложение имя папки
Шаг 2: После создания папки проекта, т.е. имени папки, перейдите к ней с помощью следующей команды:
cd имя папки
Структура проекта: это будет выглядеть следующим образом.
Шаг 3: Теперь создайте родительский и дочерний компоненты в папке src с помощью следующего кода.
Имя файла - Child.js:
Javascript
import React,{ Component } from 'react' ; class Child extends Component { constructor(props) { super (props); this .handleClick.bind( this ); } handleClick = () => { // We will start the process of changing // state of parent from Here... } render() { return ( <button onClick={ this .handleClick}>Reveal Title</button> ); } } export default Child; |
Имя файла - Parent.js:
Javascript
import React,{ Component } from 'react' ; import "./parent_css.css" // Importing child component for rendering import Child from './child' ; class Parent extends Component { constructor(props) { super (props); this .state = {title: "" }; } render() { return ( <React.Fragment> // Rendering title of state initially empty. <h1> { this .state.title} </h1> // Rendering child component here which // contains only a button <Child /> </React.Fragment> ); } } export Parent; default |
Шаг 4: Создайте функцию setStateOfParent для установки состояния Parent в родительском компоненте, также передайте функцию setStateOfParent в дочерних элементах.
Имя файла - Parent.js:
Javascript
import React,{ Component } from "react" ; import "./parent_css.css" import Child from "./child" ; class Parent extends Component { constructor(props) { super (props); this .setStateOfParent.bind( this ); this .state = {title: "" }; } // Creating below function to set state // of this (parent) component. setStateOfParent = (newTitle) => { this .setState({title: newTitle}); } render() { return ( <React.Fragment> <h1> { this .state.title} </h1> // Passing the setStateOfParent function // in child as a prop <Child setStateOfParent = { this .setStateOfParent}/> </React.Fragment> ); } } export default Parent; |
Шаг 5: Теперь получите доступ и вызовите функцию setStateOfParent в дочерних элементах всякий раз, когда вы хотите установить состояние родителя.
Имя файла - Child.js:
Javascript
import React,{ Component } from 'react' ; class Child extends Component { constructor(props) { super (props); this .handleClick.bind( this ); } handleClick = () => { // Simply call the setStateOfParent function from // prop and pass required argument this .props.setStateOfParent( "Geeks For Geeks" ); } render() { return ( <button onClick={ this .handleClick}>Reveal Title</button> ); } } export default Child; |
Шаг для запуска приложения: запустите приложение, используя следующую команду из корневого каталога проекта:
npm start
Вывод: Теперь откройте браузер и перейдите по адресу http: // localhost: 3000 / , вы увидите следующий вывод: