如何将数据从孩子传递给父母?当父级基于类而子级基于功能时 [英] How to pass the data from child to parent? when parent is class based and child is functional based

问题描述

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

有一个家长是基于班级的，而孩子是基于功能的.

家长:

import React, { Component } from "react";导入./App.css"；从./Child1/Child1"导入 Child1；类 App 扩展组件 {状态 = { 消息:"" };callbackFunction = (事件) =>{this.setState({消息:event.target.value});}使成为() {返回 (<div className="应用程序"><Child1/>

);}}导出默认应用程序；

儿童

从 'react' 导入 Reactconst Child1 = (props) =>{返回 (<div>

);}导出默认 Child1；

解决方案

我已经为您创建了另一个解决方案，使用组合功能-类-功能组件传递数据.这里是 https://codesandbox.io 点击并检查.

也在下面添加了相同的代码:

应用组件

import React, { useState } from "react";导入./styles.css"；从./child"导入孩子；导出默认函数 App() {const [name, setName] = useState(原始按钮");const [count, setCount] = useState(0);const handleClick = _name =>{setName(_name);设置计数(计数 + 1)；};const resetClick = e =>{setName(原始按钮");设置计数(0)；};返回 (
<h1>Hello CodeSandbox</h1><孩子名称={名称+ "——"+ 计数}handleClick={handleClick}重置点击={重置点击}/>
);}

child1 组件

从反应"导入反应；从./child2"导入 Child2；class Child 扩展 React.Component {构造函数(道具){超级(道具)；}使成为() {返回 (<><h2>这是孩子</h2>this.props.handleClick(新名称已更改")}>{this.props.name}<Child2 handleChilc2Click={this.props.resetClick}/></>);}}导出默认子项；

另一个组件 Child2

从反应"导入反应；const Child2 = props =>{返回 (<><h2>孩子2</h2>props.handleChilc2Click(e)}>点击我重置家长默认</>);};导出默认 Child2；

你可以从中得到一些帮助.谢谢

I want to pass the data which is anything like, array, strings, numbers into the App(Parent) Component) from the Child1(Child) components.

There's a parent who is class-based and the child is functional based.

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;

Child

import React from 'react'

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

        </div>
    );
}

export default Child1;

解决方案

I have founded another solution for you using combine Functional-Class-functional component pass data. here the live code for https://codesandbox.io Click and check that.

Also same code added bellow here:

app component

import React, { useState } from "react";
import "./styles.css";

import Child from "./child";

export default function App() {
  const [name, setName] = useState("Orignal Button");
  const [count, setCount] = useState(0);

  const handleClick = _name => {
    setName(_name);
    setCount(count + 1);
  };

  const resetClick = e => {
    setName("Orignal Button");
    setCount(0);
  };

  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      <Child
        name={name + " - " + count}
        handleClick={handleClick}
        resetClick={resetClick}
      />
    </div>
  );
}

child1 component

import React from "react";

import Child2 from "./child2";

class Child extends React.Component {
  constructor(props) {
    super(props);
  }

  render() {
    return (
      <>
        <h2>This is child</h2>
        <button onClick={e => this.props.handleClick("New Name changed")}>
          {this.props.name}
        </button>
        <Child2 handleChilc2Click={this.props.resetClick} />
      </>
    );
  }
}

export default Child;

Another component Child2

import React from "react";

const Child2 = props => {
  return (
    <>
      <h2>Child 2</h2>
      <button onClick={e => props.handleChilc2Click(e)}>
        Click me for reset Parent default
      </button>
    </>
  );
};

export default Child2;

You can some help from it. Thanks

这篇关于如何将数据从孩子传递给父母?当父级基于类而子级基于功能时的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！