CODEWITHSUNDEEP
javascriptreduxreact-redux
Mr. Hedgehog
Mr. Hedgehog

Reputation: 2885

Trigger click on Component from click on other component in react-redux flow

I have two Components (Preview and FileInput) within single Provider. I want to trigger file field when clicking on preview image.

My code looks like (simplified):

 <Provider>
   <Form>
     <Preview><ImagePlaceholder onClick={}/></Preview>
     <FileUploader><input type="file"/><FileUploader/>
   </Form>
 </Propvider>

What is best way in react-redux flow to trigger one Component from another?

I think about flag in store. Something like "shouldClickFileInput". So on click on placeholder i would set it true, and on click on input - false.

Upvotes: 1

Views: 1084

Answers (2)

just-boris
just-boris

Reputation: 9766

If you need to perform the same action from different controls, just do it:

<Provider>
   <Form>
      <Preview><ImagePlaceholder onClick={this.handleClick}/></Preview>
      <input type="file" onClick={this.handleClick}/>
   </Form>
</Propvider>

I guess that you have some upload form, which should show file select dialog on click on different items. It would be better to render several input[type=file] for each clickable area. And then you can sync selected value through the store, not the fact of the click event.

Upvotes: 1

abigwonderful
abigwonderful

Reputation: 1927

If I'm following your question, I think the best way is to setup a method for the onClick event and have that function fire whatever 'action' functions you would like to trigger. Something along the lines of:

handleClick(){
  action1();
  action2();
}

<Provider>
  <Form>
    <Preview><ImagePlaceholder onClick={this.handleClick}/></Preview>
    <FileUploader><input type="file"/><FileUploader/>
  </Form>
</Propvider>

Does that rational make sense?

Upvotes: 0

Related Questions