Reactjs 重用一个组件，而不使所有重用的组件共享相同的状态

我正在做一个项目，我有一个页面，你可以上传一些图片。在这个页面上，应该可以上传多个图像，因此为此，我创建了一个组件，旨在重用它。但是，它似乎与所有相同类型的组件共享状态

我创建了一个名为Upload的组件。此上载组件具有处于状态的文件和imagePreviewUrl。当我在我的应用程序中呈现该组件的多个实例时，它将共享此状态。这意味着无论我点击哪个上传按钮，它都会在第一个框中显示图像预览。同样，如果我再次单击任何上载按钮，它将覆盖第一个选定的图像

我是个新手，所以我不知道该怎么解决这个问题。解决方案应该是每个组件创建自己的独立状态（如果可能的话），还是每个组件共享相同的状态，并且文件/图像预览在此状态下存储在数组/对象中

代码笔：

类上载扩展了React.Component{
建造师（道具）{
超级（道具）；
此.state={
文件：“”，
imagePreviewUrl:“”
}
}
handleImageChange（e）{
e、 预防默认值（）；
让file=e.target.files[0]；
如果（文件）{
let reader=new FileReader（）；
reader.onloadend=（）=>{
这是我的国家({
档案：档案，
imagePreviewUrl:reader.result
});
};
reader.readAsDataURL（文件）；
}
}
handleDeleteImage（）{
这是我的国家({
文件：“”，
imagePreviewUrl:“”
});
}
render（）{
设{imagePreviewUrl}=this.state；
让$imagePreview=null；
如果（imagePreviewUrl）{
$imagePreview=(
{this.state.file.name}
X
);
}否则{
$imagePreview=(
请选择要预览的图像

);
}
返回(
{this.props.title}（{this.props.specs}）

{$imagePreview}
上传
这个.handleImageChange（e）}
/>
)
}
}
类应用程序扩展了React.Component{
建造师（道具）{
超级（道具）；
此.state={
}
}
handleSubmit（e）{
e、 预防默认值（）；
//做点什么
}
render（）{
返回(

拯救
)
}
}
ReactDOM.render（，document.getElementById（'root'））；

这不是因为组件共享相同的状态。这是因为您硬编码了

文件输入

元素的

id

。渲染所有3个

Upload

组件时，有3个输入元素具有相同的

id

。因此，将

上传
组件中的代码更新为：

<input
      id={this.props.id}
      className="fileInput"
      type="file"
      onChange={(e)=>this.handleImageChange(e)}
                    />

现在应该可以了。这是一个工作状态。
这不是因为组件共享相同的状态。这是因为您硬编码了
文件输入
元素的
id
。渲染所有3个
Upload
组件时，有3个输入元素具有相同的
id
。因此，将
上传
组件中的代码更新为：

<input
      id={this.props.id}
      className="fileInput"
      type="file"
      onChange={(e)=>this.handleImageChange(e)}
                    />

现在应该可以了。这是一张工作票

<Upload
    id="input-1"
    title="Title 1"
    specs="Description of first upload"
/>
<Upload
    id="input-2"
    title="Title 2"
    specs="Description of the second upload"
/>
<Upload
    id="input-3"
    title="Title 3"
    specs="Description of the third upload"
/>