如何将数据从孩子传递给父母?当父级基于类而子级基于功能时 [英] 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>
另一个组件 Child2
从反应"导入反应;const Child2 = props =>{返回 (<><h2>孩子2</h2>
你可以从中得到一些帮助.谢谢
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屋!