Javascript 如何允许输入类型=文件在反应组件中选择相同的文件
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/39484895/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to allow input type=file to select the same file in react component
提问by Joey Yi Zhao
I have a react component which renders a <input type="file">dom to allow user select images from browser. I found that its onChange method not called when I select the same file. After some searching, someone suggests using this.value=nullor return falseat the end of the onChange method but I have tried it doesn't work.
我有一个反应组件，它呈现一个<input type="file">dom 以允许用户从浏览器中选择图像。我发现当我选择同一个文件时，它的 onChange 方法没有被调用。经过一番搜索，有人建议使用this.value=null或return false在 onChange 方法的末尾，但我尝试过它不起作用。
Below is my code:
下面是我的代码：
<input id="upload" ref="upload" type="file" accept="image/*"
onChange={(event)=> { this.readFile(event) }}/>
Below is what I tried:
以下是我尝试过的：
<input id="upload" ref="upload" type="file" accept="image/*"
onChange={(event)=> {
this.readFile(event)
return false
}}/>
Another one is:
另一种是：
<input id="upload" ref="upload" type="file" accept="image/*"
onChange={(event)=> {
this.readFile(event)
this.value=null
}}/>
I believe above solutions work for jquery but I don't know how to let it work in reactjs.
我相信上述解决方案适用于 jquery，但我不知道如何让它在 reactjs 中工作。
回答by jbsmoove
Dup of this thread
这个线程的重复
<input id="upload" ref="upload" type="file" accept="image/*"
onChange={(event)=> {
this.readFile(event)
}}
onClick={(event)=> {
event.target.value = null
}}
/>
回答by Skriptotajs
I think thisin your function does not refer to inputfield. Try using event.targetinstead.
我认为this在你的函数中没有提到input字段。尝试使用event.target。
<input id="upload" ref="upload" type="file" accept="image/*"
onChange={(event)=> {
this.readFile(event)
event.target.value=null
}}/>
回答by Ernane Luis
For me actually worked: event.currentTarget.value = null
对我来说确实有效：事件。currentTarget.value = null
onClick={(event)=> {
event.currentTarget.value = null
}}
回答by Yash Vekaria
Below is my solution. (Using Typescript)
下面是我的解决方案。（使用打字稿）
import * as React from "react";
export class FileSelector extends React.Component<undefined, undefined>
{
constructor(props: any)
{
super(props);
this.handleChange = this.handleChange.bind(this);
}
handleChange(selectorFiles: FileList)
{
console.log(selectorFiles);
}
render ()
{
return <div>
<input type="file" onChange={ (e) => this.handleChange(e.target.files) } />
</div>;
}
}
回答by Mike Yakovets
My React version: 16.2.0
我的反应版本：16.2.0
@jbsmoovesolution works fine for all browsers except IE11.
@jbsmoove解决方案适用于除 IE11 之外的所有浏览器。
As for IE11, in case if we Open some file and in second time we press Cancel insteed of Open file it shows empty screen and in console we see:
对于 IE11，如果我们打开某个文件并在第二次按下打开文件的取消键，它会显示空屏幕，在控制台中我们看到：
Unable to get property 'name' of undefined or null reference
无法获取未定义或空引用的属性“名称”
So I've come up with another solution which works perfect even in IE11:
所以我想出了另一个即使在 IE11 中也能完美运行的解决方案：
<input id="upload" ref="upload" type="file" accept="image/*"
onInput={(event)=> {
this.readFile(event)
}}
onClick={(event)=> {
event.target.value = null
}}
/>
Just use onInputinstead of onChange.
只需使用onInput而不是onChange。
回答by SM Chinna
Use a fallback on-Click method to select the same image. Example:
使用回退点击方法来选择相同的图像。例子：
<input
id="upload"
ref="upload"
type="file"
accept="image/*"
multiple="false"
onChange={(e) => this.getDailyImage(e)}
onClick={(e) => e.target.files[0] && this.getDailyImage(e)}
/>
