Как установить родительское состояние из дочернего компонента в ReactJS?

Опубликовано: 7 Августа, 2021

Мы можем установить родительское состояние из дочернего компонента в 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 / , вы увидите следующий вывод: