通过单击 react-redux 流中的其他组件触发单击组件

Question

我在单个提供程序中有两个组件（Preview 和 FileInput）。我想在单击预览图像时触发文件字段。

我的代码看起来像（简化）：

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

react-redux 流程中从一个组件触发另一个组件的最佳方式是什么？

我在想商店里的旗帜。类似于 "shouldClickFileInput"。所以点击占位符我会设置它 true，然后点击输入 - false.

Answer 1

如果我正在关注你的问题，我认为最好的方法是为 onClick 事件设置一个方法，并让该函数触发你想要触发的任何 'action' 函数。大致如下：

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

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

这个道理有道理吗？

Answer 2

如果您需要从不同的控件执行相同的操作，只需这样做：

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

我猜你有一些上传表单，它应该在点击不同的项目时显示文件 select 对话框。最好为每个可点击区域渲染几个 input[type=file]。然后您可以通过商店同步 selected 值，而不是点击事件的事实。

通过单击 react-redux 流中的其他组件触发单击组件

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

javascript

redux

react-redux