Reactjs 在redux中，如何调度一个函数，并引用调用它的节点？

用例的简短解释：我需要允许用户在一个表单中包含多个文件，但是来自不同的文件夹（不同的文件夹要求意味着我不能简单地使用“multiple”属性）。我不允许动态地将文件对象分配给

字段（），这意味着我需要等待用户选择一个文件，然后我需要捕获该节点（带有该文件），隐藏它，并在其位置创建一个新的输入节点

我有一个使用jQuery的概念证明，但我正试图找出如何用Redux的方式来实现这一点。我建议的解决办法如下：

• 当用户上传一个文件时，我会发送一个操作，该操作应该将输入DOM节点插入到状态为的数组中，并隐藏它
• 在与第一个输入节点完全相同的位置动态创建一个新的输入节点
• 在页面的另一个位置，显示当前处于状态的输入节点的文件名
• 这些文件名显示还将有一个删除按钮，该按钮将发送一个删除操作，该操作将删除处于状态的相应节点
• 当用户提交表单时，它应该包括所有已添加的文件节点，因此所有文件将立即提交

我的第一个问题：有可能做到这一点吗？特别是，我可以在状态中存储节点吗

我的第二个问题：我不知道如何获取对节点的引用来测试这一点

最后，一旦我将节点添加到state（）并隐藏它，我如何在它的位置创建一个新的

节点？正如我所说，使用jQuery很容易，但我对如何使用“redux”方式感兴趣

这是我的一些代码

组件-Uploader.js

import React, { Component } from 'react';

class Uploader extends Component {

  renderHiddenInputs(files){
    if(!this.props.files || this.props.files.length == 0) {
      return
    }
    return files.map((file) => {
      return (
        <li>
        <h3>{file}</h3> // return file node
        </li>
      )
    });

  }

  renderFileNames(files){
    if(!this.props.files || this.props.files.length == 0) {
      return <h3>There are no files</h3>
    }
    return files.map((file) => {
      return (
        <li>
        <h3>{file.files[0].name}</h3> //return filenames only
        </li>
      )
    });

  }

  render() {

    return (
      <div>
        <div><input type="file" id="fileinput" onChange={this.props.addInput}/></div> //How do I pass in a ref to this exact node so It can be store in state and then create a new one in it's place?
        <hr />
        <div>{this.renderHiddenInputs(this.props.files)}</div> //we need the input nodes on the page so when the form submits the files get sent
        <div>
        <ul>
        {this.renderFileNames(this.props.files)} //the input nodes are hidden so here we display the filenames for the user to see
        </ul>
        </div>
      </div>
    );
  }
}

import { connect } from 'react-redux'
import { uploadFile, addInput } from '../actions/index';

import Uploader from '../components/Uploader';


const mapStateToProps = (state) => {
  return {
    files: state.files
  };
}

const mapDispatchToProps = (dispatch, ownProps) => {
  return {
        addInput: (inputNode) => { //How do I get inputNode?
          dispatch(addInput(inputNode))
        }
  }
}


const UploaderContainer = connect(mapStateToProps, mapDispatchToProps)(Uploader)

export default UploaderContainer