如何在 ReactJS 中从子组件设置父状态？

我们可以使用以下方法从 ReactJs 中的子组件设置父状态。

先决条件： ReactJS 中的状态介绍

• 我们实际上会在父组件本身中设置父级的状态，但子级将负责设置。
• 我们将在 parent 中创建一个函数来使用给定的输入设置状态。
• 我们将在 children 中将该函数作为道具传递。
• 然后 Children 将使用新值调用该函数。
• 我们将在函数中设置父级的状态。

创建反应应用程序：

第 1 步：使用以下命令创建一个 React 应用程序：

npx create-react-app foldername

步骤2：创建项目文件夹后，即文件夹名称，使用以下命令移动到它：

cd foldername

项目结构：它将如下所示。

项目结构

第 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 (
        Reveal Title
    );
  }
}
  
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 (
        
          // Rendering title of state initially empty.
          
 {this.state.title} 
            
          // Rendering child component here which 
          // contains only a button
          
        
    );
  }
}
  
export default Parent;

第四步：创建函数setStateOfParent来设置 Parent 组件中 Parent 的状态，同时在 children 中传递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 (
        
          
 {this.state.title} 
            
          // Passing the setStateOfParent function 
          // in child as a prop
          
        
    );
  }
}
  
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 (
        Reveal Title
    );
  }
}
  
export default Child;

运行应用程序的步骤：从项目的根目录使用以下命令运行应用程序：

npm start

输出：现在打开浏览器并转到http://localhost:3000/ ，您将看到以下输出：