通过三个组件级别传递函数（即从孙组件调用函数）

Question

I want to pass an item id from either a Child component or grandchild component, but cannot figure out how to do so. Other examples I have looked at show using the arrow function to achieve this, but for whatever reason my function is not getting called.

I have the following in Parent.js :

chosenItem(id){
    console.log("CHOSEN ITEM SELECTED")
    this.setState({
        chosen_item: id
    })
}

and in the Parent.js render function:

<Child objects={objects} chosenItem={() => this.chosenItem()} />

Then in my Child.js I have:

items = this.props.objects.items.map(item => {
    return (
        <ClickableTextComponent
            key={item.id}
            text={item.label}
            onClick={item =>this.props.chosenItem(item.id)}
         />
     )
 })

In my Child.js render function I have:

{items}

I also wasn't sure whether the actual click event should go inside of the Child.js or the ClickableTextComponent. Or does it really matter? Currently I have placed it in the Child.js component as seen above.

What am I doing wrong? How can I modify my code so that the function gets called? I have read a bit about currying to prevent a function from being recreated multiple times. Is that necessary in this case? If so, where and how should I be implementing it. In my Parent or Child components?

Update

I was previously trying to get the onClick to work from Child.js, but as it needs to be attached to a div I have moved it to ClickableTextComponent (the grandchild component).

One issue with ClickableTextComponent is that I want to be able to set the state when the component is clicked so that I can turn the component a different colour. Because of that I am needing to use a function to then call the chosenItem function. So here is what I have in my `ClickableTextComponent.js':

handleClick(){
    this.setState({
        text_state: "clicked"
    })
    this.props.chosenItem()
}

In the render I then have:

<div
    onClick={this.handleClick.bind(this)}
    onMouseOver={this.changeTextState.bind(this, "hover")}
    onMouseOut={this.changeTextState.bind(this, "default")}
>{this.props.text}</div>

New Error

Based on the above changes, I am now getting this.props.chosenItem is not a function . However, I cannot figure out why it is giving me this error. I can see the function name when I display this.props to the console. What am I doing wrong?

Answer 1

The answer given by Kevin He holds true. But there is one problem with that solution.

<Child objects={objects} chosenItem={(x) => this.chosenItem(x)} />

When you do such, every time your parent is rerendered. It will create a new instance of the function. And, your child component also rerenders because It sees the props changing.

Best solution is:

<Child objects={objects} chosenItem={this.chosenItem} />

Update:

Now, it seems to make sense.

The problem is again with ClickableTextComponent .

Here is the update ClickableTextComponent which works.

https://codesandbox.io/s/73x6mnr8k0

The main problem:

items = this.props.objects.items.map(item => {
    return (
        <ClickableTextComponent
            key={item.id}
            text={item.label}
            onClick={item =>this.props.chosenItem(item.id)}
         />
     )
 })

//
// Here you made a function (item) => this.props.choseItem(item.id)
// That means when you call that function you should call like this
// i.e. passing parameter needed for the function
// 

handleClick(){
    this.setState({
        text_state: "clicked"
    })
    this.props.chosenItem(item)
}

//
// But do you do not have the item in the children
// Parent should be changed as below
//

items = this.props.objects.items.map(item => {
    return (
        <ClickableTextComponent
            key={item.id}
            text={item.label}
            onClick={() =>this.props.chosenItem(item.id)}
         />
     )
 })

//
// Now you made a fuction () => this.props.chosenItem(item.id)
// The main difference being you are not taking a item as parameter
// item will be taken from outer scope that means, item from map
//

// 
// Another solution can be
// 

items = this.props.objects.items.map(item => {
    return (
        <ClickableTextComponent
            key={item.id}
            id={item.id}
            text={item.label}
            onClick={this.props.chosenItem}
         />
     )
 })

// And in ClickableTextComponent

handleClick(){
    this.setState({
        text_state: "clicked"
    })
    this.props.chosenItem(this.props.id)
}

Answer 2

You can do this:

<Child objects={objects} chosenItem={(x) => this.chosenItem(x)} />

Note that chosenItem is a function, then whenever it's called with item.id , it will take call the function this.chosenItem at the parent element.