如何在 ReactJS 中将数据从子组件传递到其父组件？

以下是将数据从子组件传递到父组件的步骤：

• 在父组件中，创建一个回调函数。此回调函数将从子组件中检索数据。
• 将回调函数作为来自父组件的道具传递给子组件。
• 子组件使用 props 调用父回调函数，并将数据传递给父组件。

创建反应应用程序：

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

npx create-react-app foldername

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

cd foldername

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

文件路径-src/App.js：

Javascript

import React from 'react';
import Child from './Child'
class App extends React.Component{
      
       state = {
        name: "",
       }
  
    handleCallback = (childData) =>{
        this.setState({name: childData})
    }
  
    render(){
        const {name} = this.state;
        return(
            

                
                {name}
            
        )
    }
}
export default App

文件路径-src/component/Child.js

Javascript

import React from 'react'
class Child extends React.Component{
    
    onTrigger = (event) => {
        this.props.parentCallback(event.target.myname.value);
        event.preventDefault();
    }
  
    render(){
        return(
        

            

                
                




                
                




            
        
        )
    }
}
export default Child

输出：