React - 在<input type =“file”/>上手动触发onChange事件

时间:2017-09-20 11:39:14

标签: javascript reactjs

我需要在用户点击重置按钮后在group <- list(group1= c("S1","S2"),group2=c("S3","S4"),group3=c("S5","S6")) for(i in 1:length(group)) { p_values <- sapply(1:nrow(df1), function(x) { a=cbind(df1[x,group[[i]][1]],df1[x,group[[i]][2]]) b=cbind(df2[x,group[[i]][1]],df2[x,group[[i]][2]]) fisher.test(rbind(a,b))$p.value }) p <- as.data.frame(p_values) colnames(p) <- paste("PValue-Group-",i,sep="") if (i==1) { Type<-as.data.frame(df1$Type) colnames(Type) <- "Type" final <- cbind(Type,p) }else{ final <- cbind(final,p) } } Type PValue-Group-1 PValue-Group-2 PValue-Group-3 1 CC 0.0004191119 0.0005763285 0.31383253 2 Ch 0.6978356887 0.6504086114 0.52187626 3 H 0.8884858252 0.4619796458 0.64343778 4 J 0.0225999709 0.1457729970 0.49159715 5 OS 0.5491422972 0.3829413140 0.73695562 6 O 0.0720173867 0.1166177467 0.08215306 7 R 0.5012970020 0.9066133264 0.03416412 8 W 0.0209138164 0.7377283808 0.01096746 元素上手动触发onChange事件。我有一个复杂的表单,包含20多个输入,允许动态添加新输入,其处理由我的容器组件(未显示)中的顶级函数处理,该函数接受每个输入的更改事件并指出如何改变我的状态。

在页面加载时,我调用API并使用数据预填充表单。根据查询的内容,这有时可能包括英雄形象。如果图像存在,则使用“单击以删除/更改”按钮显示该图像。单击此按钮应触发输入上的onChange事件,该事件会刷新React树并更新我的“内容”状态(在这种情况下,删除hero_image对象中的数据)。

我已尝试将该值设置为null,但由于该值在页面加载时已为空,因此它似乎不会触发onChange事件。我也试过以不同的方式手动触发事件。由于您无法以安全原因进行文本输入的方式预先填充文件输入的值,因此我很难找到解决此问题的最佳方法。

<input type="file">

1 个答案:

答案 0 :(得分:1)

在你的onChange中你应该将文件名保存到状态(我相信e.target.value)并将其设置为输入的value道具。如果选择了另一个文件,它将触发onChange。然后在重置按钮上将状态更改为null,是否不会触发onChange事件?

state = {
  filename: '',
}

<input value={this.state.filename} ... />

handleImageChange(e) {
  this.setState({ filename: e.target.value });
}

handleFormReset() {
  this.setState({ filename: '' });
}