多选文件按钮

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添加到阵列时，不要忘记向FormControl添加新的唯一ref。