[英]React : How to pass values from grandchild through child to parent?
I have a parent,child and grandchild component. 我有一个父母,子女和孙子部分。 I have different input fields and want to pass the values from grandchild to child to parent where eventually i set the state with the values.
我有不同的输入字段,并希望将值从孙子代传递到子代再传递给父代,最终我用这些值设置状态。 I havent included all of my code, but doing it like that is necessary because of other things in my code, which I didnt include in this post as its irrelevant.
我没有包含所有代码,但是这样做是有必要的,因为我的代码中有其他内容,因此我没有在这篇文章中作为无关紧要的内容进行介绍。 Im not sure how to do that and tried to implement what I found online, however, its not working.
我不确定如何做到这一点,并尝试实施我在网上找到的内容,但是,它无法正常工作。 Any ideas?
有任何想法吗? Thanks!!
谢谢!!
class Parent extends React.Component {
constructor(props) {
super(props);
this.state = {
input: {}
};
this.changeName = this.changeName.bind(this);
this.handleInput = this.handleInput.bind(this);
}
changeName(newName) {
this.setState({
name: newName
});
}
handleInput() {
console.log("helloooooo", this.state.name)
}
render() {
return (
<div>
<Child onChange={this.changeName} onClick={this.handleInput}/>
</div>
)
}
}
class Child extends React.Component {
constructor(props) {
super(props);
this.handleChange = this.handleChange.bind(this);
this.handleInput2 = this.handleInput2.bind(this);
}
handleChange(e) {
this.props.handleChange(e);
}
handleInput2() {
this.props.onClick()
}
render() {
return (
<div>
<GrandChild onChange={this.handleChange}/>
<input type="submit" onClick={this.handleInput2}/>
</div>
)
}
}
class GrandChild extends React.Component {
constructor(props) {
super(props);
this.handleChange = this.handleChange.bind(this);
this.handleInput2 = this.handleInput2.bind(this);
}
handleChange(e) {
const input = this.props.input;
input[name] = e.target.value;
}
render() {
return (
<div>
<input name="firstname" onChange={this.handleChange}/>
<input name="lastname" onChange={this.handleChange}/>
</div>
)
}
In real life everything is easier. 在现实生活中,一切都变得容易。 For every component you answer following questions.
对于每个组件,您都会回答以下问题。
What data the component will receive?
组件将接收什么数据? Does it emit any event?
它发出任何事件吗?
That's the
props
of the component.那就是组件的
props
。
So no matter how the relationship between your components is... Just answer those questions and you will be good. 因此,无论您的组件之间的关系如何...只要回答这些问题,您就会很好。
Example: 例:
I have a TodoList
that contains a list of TodoItem
elements. 我有一个
TodoList
,其中包含TodoItem
元素的列表。 (Parent) (父母)
I have a TodoItem
that displays the content of the TodoItem. 我有一个
TodoItem
,它显示TodoItem
的内容。 (Child) (儿童)
I have a Checkbox
that displays a check box. 我有一个
Checkbox
,显示复选框。 (GrandChild) (孙子)
a CheckBox
receives a boolean saying isSelected
and emit and event onChange
. CheckBox
收到一个布尔型isSelected
并发出onChange
事件。 That's all what I know. 这就是我所知道的。
a TodoItem
receives a Todo
and emit onChange
. TodoItem
接收Todo
并发出onChange
。 That's all I care. 这就是我所关心的。
When you put everything together, TodoList
has a todos
, and pass todos[i]
to its child and todos[i].isSelected
to its grandchild, but that is what you don't need to care about. 当您将所有内容放在一起时,
TodoList
有一个todos
,并将todos[i]
传递给它的子代,将todos[i].isSelected
给它的孙子,但这就是您不需要关心的。 All what you care is: 您所关心的是:
What data the component will receive?
组件将接收什么数据? Does it emit any event?
它发出任何事件吗?
At the component level. 在组件级别。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.