时间戳

首页 > 解决方案 > 如何将数据从孩子传递给父母？当父类基于类而子类基于功能时

reactjs - 如何将数据从孩子传递给父母？当父类基于类而子类基于功能时

问题描述

我想将诸如数组、字符串、数字之类的数据从 Child1(Child) 组件传递到 App(Parent) 组件)。

有一个基于类的父母，而孩子是基于功能的。

家长： 

import React, { Component } from "react";
import "./App.css";
import Child1 from "./Child1/Child1";



class App extends Component {
  state = { message: "" };

  callbackFunction = (event) => {
    this.setState({
      message: event.target.value
    });
  }

  render() {
    return (
      <div className="App">
        <Child1 />
      </div>
    );
  }
}

export default App;

孩子

import React from 'react'

const Child1 = (props) => {
    return (
        <div>

        </div>
    );
}

export default Child1;

标签： reactjsreact-native

解决方案

如果您想在单击子组件中的按钮时向父组件发送一些数据，您可以这样做：

import React from 'react'

const Child1 = React.memo((props) => {
    return (
        <div>
         <button onClick={() => {props.clicked('some data')}} type="button">Click me to send data<button>
        </div>
    );
})

export default Child1;

现在您可以为父组件中的 clicked 属性分配一个函数，并在单击子组件中的按钮时调用该函数：

class App extends Component {
  state = { message: "" };

  callbackFunction = (event) => {
    this.setState({
      message: event.target.value
    });
  }
  
  clicked = (data) => { // this func. will be executed
   console.log(data);
  }

  render() {
    return (
      <div className="App">
        <Child1 clicked={this.clicked}/>
      </div>
    );
  }
}

推荐阅读