如何在子组件中调用父函数

Question

I checked quite a lot of examples but found most of them having events fired in Child Component.
Can someone please suggest how can I call the Parent Component's function in child with the click event on Parent Component? Thanks.

Parent Component ( app.js ):

Class App extends Component { 

    handleClick = (e, id, text) => {
        e.preventDefault();
        this.setState({val: text})
      }

      render() {
        return (
          <div>
            <Form val={this.state.val} Click={this.handleClick.bind(this) }/>
            <Button onClick={(e) => this.handleClick(e, todo.id, todo.text)}>
               <Icon>edit_icon</Icon>
            </Button>
        </div>
      )
   }
 }

Child Component ( form.js ):

    this.props.Click(); //where should i call this function since my button is in parent component

Class Form extends Component{

    render() {
        const { text } = this.state;
        return (
          <TextField
              value={text}
              color="secondary"
          />
        )
      }
    }
}

Answer 1

If you want to call it in your Child component, you need an event to trigger it or maybe a condition. So, for example in your form.js , we will trigger it with a button click form your child component

render() {
    const { text } = this.state;
    return (
      <TextField
          value={text}
          color="secondary"
      />
      <Button onClick={this.props.Click} />
    )
  }
}

Maybe, using a Button in your child component is not a great choice for your case since you already have a Button to call the Click function in your parent component, this Button in child component I made is only for example

Answer 2

One way you can do this is use a ref to call the function..

// create the ref
constructor() {
  super();
  this.myFormRef = React.createRef()
}

// click handler for the button
handleClick  = (e, id, text) => {
  // here you have the child instance which gives you access to its functions
  this.myFormRef.someChildMethodThatIsOnTheChildClass()
}
render() {
  // notice here we use the ref on the form via... ref={this.myFormRef}
  return (
    <Form val={this.state.val} ref={this.myFormRef} Click={this.handleClick.bind(this) }/>
    <Button onClick={(e) => this.handleClick(e, todo.id, todo.text)}>
       <Icon>edit_icon</Icon>
    </Button>
  )
)

I would like to note though that it doesn't seem to make much sense as to why you want to do this. You should probably re-think your architecture. Also what is the button press supposed to be doing? submitting the form?