反应-将功能向下传递两扇门，并带有参数

Question

I want to achieve the following. Component should be able to take as a prop a parametrized function. In case a button inside the component is pressed it will call the function with the parameter. Nothing complicated about that:

import React, {Component} from 'react';
import {Button, Modal} from 'semantic-ui-react';


class ConfirmationBox extends Component {
  state = {
    modalOpen: false
  };

  handleOpen = () => {
    this.setState({modalOpen: true})
  };

  handleClose = () => {
    this.setState({modalOpen: false})
  };

  handleConfirmation = () => {

    if (this.props.okFunction){
      console.log("calling passed function");
      console.log(this.props.okFunction);
      this.handleClose();
      this.props.okFunction();
    }
    else{
      console.log("no function passed");
      this.handleClose();
    }
  };

  render() {
    return (
      <Modal open={this.state.modalOpen}
             trigger={this.props.trigger}
             onOpen={() => this.handleOpen()}
             onClose={() => this.handleClose()}>

        <Modal.Content><p>{this.props.message}</p></Modal.Content>
        <Modal.Actions>
          <Button positive onClick={() => this.handleClose()}> {this.props.cancelMessage}
          </Button>
          <Button negative onClick={()=>this.handleConfirmation()}> {this.props.okMessage}
          </Button>
        </Modal.Actions>
      </Modal>

    );
  }


}

export default ConfirmationBox;

Pass in a function from the parent component and it works as expected.

class Parent extends Component {

  //all kinds of stuff obviously redacted

  //define function
  deletePerson(id){ console.log('Person deleted='+id);}

  //inside render function
  render{
    return(
      <ConfirmationBox trigger={<a style={{cursor:"pointer"}}>Delete</a>}
                             message='Are you sure you want to delete this API key?'
                             okMessage="Delete"
                             okFunction={()=>this.deletePerson(id)}
                             cancelMessage="Cancel"

          />

    )}

}

The delete action (currently just a console log for example) using id parameter is done and modal is closed.

The problem arises when I want to pass the function from a GrandParentElement to ParentElement, where I'd want to add parameter(s) to the function and then pass it to the ConfirmationBox.

At first it is also all nice and dandy.

class GrandParent extends Component {

  //define function
  deletePerson(id){ console.log('Person deleted='+id);}

  //inside render function
  render{
    return(
      <Parent deleteFunction={this.deletePerson}    />

    )}

}

class Parent extends Component {

  render{
    return(
      <ConfirmationBox trigger={<a style={{cursor:"pointer"}}>Delete</a>}
                             message='Are you sure?'
                             okMessage="Delete"
                             okFunction={()=>this.props.deleteFunction(id)}
                             cancelMessage="Cancel"

          />

    )}

}

Nicely it forwards a totally independent function about deletingPersons from GrandParent to Parent, where it adds a parameter. Then the parametrized function is called inside modal if the user so chooses (clicks the right button). The thing is - why would I want to pass a function from GrandParent to Parent and then to Modal? Well because GrandParent is a ContainerElement where ajax calls are made and state kept, while the parent is a PresentationElement receiving props from Grandparent. The list of lets say persons will be presented and buttons, links, icons etc. will be added to list elements on which to click to edit/delete items. So passing down a function from GrandParent and adding a parameter in Parent seems like a common enough pattern for our ConfirmationBox.

Where then lies the problem?

As I spoke the GrandParent is a Container that does ajax calls and keeps state. Therefore the situation inside GrandParent might look much less like

deletePerson(id){ console.log('Person deleted='+id);}

and much more something like that

updateState(){
    //do update the state with information from ajax call
}

deletePerson(id){

    ajaxCallToDeletePerson(id);
    //also maybe ajax calls error handling and loading/waiting screens/spinners etc.
    this.updateState;
}

So now I cannot find a good combination from the myriad of different ways you can pass down the functions.

If I go with the previously shown method of <Parent deleteFunction={this.deletePerson}/> inside GrandParent and <ConfirmationBox okFunction={()=>this.props.deleteFunction(id)} /> inside Parent. I will forward the function and be able to add parameter but the context of this. for updateState is lost. So the button-click inside modal will not refresh the state of GrandParent.

Of the myriad of combinations of different methods of passing functions and function calls inside my three components, (using raw functions, binding the functions in render, binding them inside constructor,using arrow functions.) I did not find a workable combination that would serve the purpose of passing down a function from the GrandParent so that it could be called by clicking button inside ConfirmationBox while at the same time adding a parameter to it inside the Parent component. Either I lose the context needed to update the state of GrandParent, or I will be unable to give a parameter, or the functions will be called on render or other such inappropriate time, or not called when needed. Whatever combinations I can think of something is always out of order.

I know this is piece here is rather TLDR but I wanted to add all the info I have on the problem. If someone has made it thus far and is experienced in JS/React then I am most thankful to hear your ideas how passing down functions(and or function calls) should be implemented for this to actually work out.

Answer 1

I recently implemented something similar for a modal. For me, the key was binding the this context in the component where it is needed.

So in GrandParent , you set up a constructor:

 ...
 constructor () {
   super()
   this.state = {deleting: false} // Set up local state if needed
   this.deleteFunction = this.deleteFunction.bind(this) // binds this context to GrandParent component.
 }
 deleteFunction () {
   this.setState({deleting: true}) // or whatever it needs to be
 }
 ...

Then, deleteFunction has access to the local state of GrandParent .

If you pass it directly from Grandparent to Parent to Child, this should work:

In Grandparent: <Parent deleteFunction={this.deleteFunction} />

In Parent: <Child deleteFunction={this.props.deleteFunction} />

In child: onClick={() => this.props.deleteFunction()}

Now, you talked about adding a parameter to the deleteFunction in Parent. I would go about this by also passing the parameter from Parent to Child and then calling the function with the parameter in Child:

In Parent: <Child deleteFunction={this.props.deleteFunction} deleteParam={param}/>

In child: onClick={() => this.props.deleteFunction(this.props.deleteParam)}

Answer 2

Can you check what i do here and tell me if it helps you ?

I'm still learning react and find your issue interesting

Jwu