正如我上面的标题所说,我遇到了一个问题。我有 4 个输入文件类型,它必须分为 4 个按钮,但每当我尝试上传新文件时,旧的预览就消失了,但它仍然在那里。我使用reactjs来制作这个。
每当我尝试在这里搜索时,它总是关于多个图像上传预览。但我尝试做的是一张一张上传并全部预览。
我已经在这里制作了一个codesandbox:https://codesandbox.io/s/happy-bardeen-q89rr?fontsize=14
有人可以帮我解决这个问题吗?我做了一些技巧将其保存在本地存储中,但它仍然不起作用
最佳答案
问题在于状态集或结构,具体取决于观点。
这是您的初始状态:
state = {
form: {
frontDesign: [],
backDesign: [],
leftDesign: [],
rightDesign: []
}
};
但是,每次使用新值更新时,您都会覆盖以前的值
this.setState(state => ({
...state,
form: {
frontDesign: [reader.result]
}
}));
请注意,state
已包含表单对象,您只需使用 form { frontDesign: value }
设置新状态,如上例所示。
您要么摆脱表单对象包装器,要么以这种方式设置状态
this.setState(state => ({
form: {
...state.form,
frontDesign: [reader.result]
}
}));
注意...state.form
传播。
如有其他问题,请告诉我。
关于javascript - 我想显示所有图像预览,但每当我上传新图像时,旧图像就会消失,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/57535394/