将状态从子级传递到父级组件 [英] Passing state from a child to parent component

问题描述

在子组件状态下是否有任何适当的方法来访问属性并从父组件获取其值?

Is there any proper way to access a property in the state of a child component and get its value from a parent component?

我有一个名为"itemSelection"的组件，在该组件中，我通过api响应进行映射以获取类似这样的项目

I have a component called "itemSelection" where I map through an api response to get some items like this

            <div className="row">
                {this.state.items.map(i => <Item ref="item" id={i.id} name={i.name} quantity={i.quantity} />)}
            </div>

在Item组件中，有一个状态为选定"的属性，我想知道它的值在itemSelection组件中为true还是false.我知道我可以将道具从itemSelection传递给Item，但是如果我想要相反的东西怎么办?我可以在其中将数据从Item传递到itemSelection

In the Item component there a property in the state called "selected" which I want to know its value if it was true or false in the itemSelection component. I know I can pass props from itemSelection to Item but what if I want the opposite? where I can pass data from Item to itemSelection

已编辑

因此，我在父组件"itemSelection"中创建了一个名为"selected"的属性，并将其设置为= false =(知道我在子组件中具有相同的属性，该属性也设置为= false = )

So, I have made a property in the parent component "itemSelection" called "selected" and I have set it to =false= (knowing that I have the same property in the child component which is set to =false= also)

在子组件中，我将setState设置为将其更改为= true =

in the child component I have put this line in the event handler function after I have made setState to the property selected to change it to =true=

this.props.getPropsFromChild(this.state.selected);

然后在父组件中，我已经完成了此功能

then in the parent component I have made this function

getPropsFromChild = (selected) => {
      this.setState({selected: selected}); 
  }

但仍然没有用，我不知道是否设置正确.

but still didn't work, I don't know if I have set it right.

推荐答案

使用React中的回调函数将道具从子组件传递到父组件.或者，您也可以使用状态管理库(例如Redux)并将数据存储在子组件中，并在父组件中获取数据.

Passing props from child to parent component works using callback functions in React. Or you can also use state management library like Redux and store the data in child component and get the data in parent component.

以下示例说明了如何从孩子向父母发送道具.我在下面分享了一个示例，以使您了解如何将道具从孩子发送给父母.

The example below illustrate how to send props from child to parent. I am sharing below example to make you understand how you can send props from child to parent.

ItemSelection:父组件

ItemSelection: Parent component

      //handler function
      getPropsFromChild = (id, name) => {
            console.log(id, name);
       }

       //pass down your handler function to child component as a prop
        <div className="row">
            {this.state.items.map(i => <Item ref="item" id={i.id} name={i.name} getPropsFromChild={this.getPropsFromChild} quantity={i.quantity} />)}
        </div>

项目:子组件

componentDidMount(){
    //access handler function passed to your item component and access it using this.props and send the values as you want to the function
    this.props.getPropsFromChild("01", "Hi");
}

这篇关于将状态从子级传递到父级组件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！