Is there a way to control the child component function by parent component?

Question

I tried to build a image upload tool, every child component have there own upload button. Is there the way to let the upload function control by parent component?

following the code:

Child Component

class Child extends Component{
 constructor(props){
  super(props)
  this.state={
   imageUrl: 'base64'
  }
 }
 componentDidMount(){
  this.setState({imageUrl: this.props.image})
 }
 handleUpload(){
  axios.post(this.state.imageUrl);
 }
 render(){
  return(
   <div>
    <img src={this.state.imageUrl}/>
    <button onClick={this.handleUpload.bind(this)}></button>
   </div>
  ) 
 }
}

Parent Component

class Parent extends Component{
 constructor(props){
  super(props)
  this.state={
   imageFiles: [...image]
  }
 }
 componentDidMount(){

 }

 render(){
  return(
   <div>
    {
     this.state.imageFiles.map(image=>{
      return(
       <Child image={image}/>
      )
     })
    } 
   </div>
  ) 
 }
}

I know how to access the parent component function to child component by this way <child handle={this.handle.bind(this)}/> in the parent component.

Is there some method to let parent component functions can trigger all the child component?

Possible duplicate of [Call child method from parent](https://stackoverflow.com/questions/37949981/call-child-method-from-parent) — Mike Kor, Mar 16 '18 at 06:43

score 1 · Answer 1 · answered Mar 16 '18 at 06:39

1

You could move handle function in the parent component, then pass it to the child component like:

<Child image={image} onClickUpload={this.handleUpload}/>

answered Mar 16 '18 at 06:39

PhatHoang

23
6

score 0 · Accepted Answer · answered Mar 16 '18 at 06:37

0

Here is the same question

Make a ref for a child component and then call it within parent's function.

answered Mar 16 '18 at 06:37

Mike Kor

876
5
14

If the Child components are iterator, and the `ref` will implement the last component function, it's possible to implement all the child component? – Champer Wu Mar 16 '18 at 08:17
just make sure you add refs to all components – Mike Kor Mar 16 '18 at 08:44
Thanks , I found use for loop can do it – Champer Wu Mar 16 '18 at 08:45

Is there a way to control the child component function by parent component?

2 Answers2