reactjs - 多选文件按钮

Question

我想要实现的是只有在第一个文件附加一个文件后，才有另一个选择文件按钮上传另一个文件。

我正在执行以下操作来呈现我的按钮:

<FormControl
   type="file"
   accept=".jpg"
   onChange={this.onImageUpload}
/>

我尝试的是首先创建一个包含一个空值的数组。当调用 onImageUpload 时，我将文件中的值推送到数组中。现在我在数组中有 2 个元素，null 和文件。我尝试遍历数组的长度并呈现许多选择文件上传按钮。问题是我在执行此操作时丢失了按钮旁边的文件名。如何添加新按钮而不丢失前一个按钮的文件名？

Answer 1

你可以做的是在构造函数中声明一个数组状态，在索引 0 处使用单个 FormControl，如下所示，

constructor(props) {
   this.state = {
      FormControls: [
       <FormControl
         type="file"
         accept=".jpg"
         onChange={this.onImageUpload}
       />
     ]
   }
}

然后像这样在上传图像(触发 onChange)时将另一个插入到数组中，

onImageUpload() {
   let formArray = this.state.FormControls;
   formArray.push(<FormControl
         type="file"
         accept=".jpg"
         onChange={this.onImageUpload}
       />
   );
   this.setState({FormControls: formArray})
}

最后，让顶层父级像这样包含所有输入 (FormControl)，

<ParentView>{this.state.FormControls}</ParentView>

此外，不要忘记在将 FormControl 添加到数组时向其添加一个新的且唯一的 ref。