Question

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

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

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

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

我想到商店里的旗帜。像“shouldClickFileInput”之类的东西。因此，点击占位符我会将其设置为true，然后点击输入 - false。

Answer 1

如果您需要从不同的控件执行相同的操作，请执行以下操作：

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

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

Answer 2

如果我正在关注您的问题，我认为最好的方法是为onClick事件设置一个方法，并让该函数触发您想要触发的任何“动作”函数。有点像：

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

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

这种理性是否有意义？

触发点击Component，点击react-redux流程中的其他组件

2 个答案: