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

考虑到React 函数组件和使用Hook越来越流行，我将举一个简单的示例说明如何将数据从子组件传递到父组件

在父函数组件中，我们将有：

import React, { useState, useEffect } from "react";

然后

const [childData, setChildData] = useState("");

并将setChildData（其工作类似于类组件中的this.setState）传递给Child

return( <ChildComponent passChildData={setChildData} /> )

首先在儿童部分，我们得到了接收道具

function ChildComponent(props){ return (...) }

那么您可以像使用处理程序函数一样以任何方式传递数据

const functionHandler = (data) => {

props.passChildData(data);

}

这个想法是发送一个回调给孩子，该孩子将被调用以返回数据

使用函数的完整和最小示例：

应用程序将创建一个孩子，这将计算一个随机数，并将其发送回直接到父，这将console.log结果

const Child = ({ handleRandom }) => {
  handleRandom(Math.random())

  return <span>child</span>
}

const App = () => <Child handleRandom={(num) => console.log(num)}/>

您甚至可以避免父级函数直接更新状态

在父组件中：

render(){
 return(<Child sendData={ v => this.setState({item: v}) } />);
}

在子组件中：

demoMethod(){
   this.props.sendData(value);
}

我找到了一种在需要时如何从父母的子组件中获取数据的方法。

上级：

class ParentComponent extends Component{
  onSubmit(data) {
    let mapPoint = this.getMapPoint();
  }

  render(){
    return (
      <form onSubmit={this.onSubmit.bind(this)}>
        <ChildComponent getCurrentPoint={getMapPoint => {this.getMapPoint = getMapPoint}} />
        <input type="submit" value="Submit" />
      </form>
    )
  }
}

儿童：

class ChildComponent extends Component{
  constructor(props){
    super(props);

    if (props.getCurrentPoint){
      props.getCurrentPoint(this.getMapPoint.bind(this));
    }
  }

  getMapPoint(){
    return this.Point;
  }
}

此示例说明如何将功能从子组件传递到父组件，以及如何使用此函数从子组件获取数据。

从子组件到父组件如下

父组件

class Parent extends React.Component {
   state = { message: "parent message" }
   callbackFunction = (childData) => {
       this.setState({message: childData})
   },
   render() {
        return (
            <div>
                 <Child parentCallback = {this.callbackFunction}/>
                 <p> {this.state.message} </p>
            </div>
        );
   }
}

子组件

class Child extends React.Component{
    sendBackData = () => {
         this.props.parentCallback("child message");
    },
    render() { 
       <button onClick={sendBackData}>click me to send back</button>
    }
};

我希望这项工作

将数据从子组件传递到父组件

在父组件中：

getData(val){
    // do not forget to bind getData in constructor
    console.log(val);
}
render(){
 return(<Child sendData={this.getData}/>);
}

在子组件中：

demoMethod(){
   this.props.sendData(value);
 }