简体   繁体   English

React:如何将孙子中的值通过子代传递给父代?

[英]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.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM