如何在 ReactJS 中更新父状态？

我们可以将设置状态的函数从父组件传递给子组件作为道具。

创建反应应用程序：

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

npx create-react-app foldername

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

cd foldername

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

项目结构

文件名：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 (
      

        
        
      
    );
  }
}
class Child extends Component {
  
  render() {
    return (
       this.props
            .updateState('parent state changed')}>
        {this.props.text}
      
    )
  }
}
  
export default App;

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

npm start

输出：您将在屏幕上看到以下按钮：

点击前

点击按钮后，输出如下：

点击后