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

小编典典

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

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;

阅读 204

2020-07-22

共1个答案

小编典典

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

同样在下面添加了以下代码：

应用程序组件

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组件

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;

另一个组件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;

您可以从中获得一些帮助。谢谢

2020-07-22