当我在 React js 中上传图片时不会触发 onChange答案

【问题标题】：onChange is not triggered when i upload a image in react js当我在 React js 中上传图片时不会触发 onChange
【发布时间】：2018-06-15 14:54:50
【问题描述】：

我想在 react js 中上传一张图片我正在将属性发送到像

这样的组件

<Input 
    changed={(event) => this.ChangedHandler(event)} 
    clicked={(event) => this.ClickedHandler(event)} 
 />

我收到了来自另一个功能组件的喜欢

const Input = (props) =>{
  return(
     <input
        onChange={props.changed} 
        onClick={props.clicked} 
    />
    <label>
        <input id="myFile" type="file"/>
        Upload File
    </label>
 )
}

当我在尝试上传图片时点击时 onClick 事件被正确触发，但是选择要上传的文件 onChange 应该被触发但没有发生。

【问题讨论】：

那么 input[type=file] 和另一个带有事件处理程序的连接是什么？
@dfsq 我相应地更新了我的问题。
input[type=file] 和事件处理程序输入之间有什么联系？加上你的组件的渲染是无效的。
带事件处理程序的输入是一个组件，它将事件处理程序作为道具发送到功能组件“const Input”。

标签： javascript html reactjs

【解决方案1】：

在您的组件Input 中，您没有正确传递道具。这就是你要做的。

<Input 
   changed={(event) => { this.ChangedHandler(event) }} 
   clicked={(event) => { this.ClickedHandler(event) }} 
/>

在您的Input 组件文件中，您将执行此操作。

const Input = (props) => {
  return(
    <input 
      type="file" 
      onChange={props.changed} 
      onClick={props.clicked} 
    >
      Upload
    </input>
   )
 }

【讨论】：

如果我要上传的文件类型应该是file.("type=file")
抱歉弄错了，@fabian_schultz 编辑了我的答案。希望对您有所帮助。