Reactjs onChangeが機能しません

Question

アップロードする前に画像をアップロードして表示できるコンポーネントを作成したいと思います。ファイルの入力フィールドは非表示になっています。代わりに、ユーザーがクリックできる場所にdivが表示され、入力フィールドでclickイベントが発生し、ユーザーは画像を挿入できます。

これは問題なく動作しますが、ユーザーが画像を挿入すると、onChange()は発生しません。私は間違って何をしていますか？

export default class CreateArticlePublish extends React.Component { 
    insertImage =() => { 
     article_image: this.refs.article_image.click(); 
    } 
    displayImage = (event) => { 
     imagePlaceholder: this.refs.imagePlaceholder; 
     var url = URL.createObjectURL(event.target.files[0]); 
     imagePlaceholder.style.backgroundImage = "url(" + url + ")"; 
    } 
    render() { 
     return(
      <div> 
       <div id="publish-metadata"> 
        <form> 
         <label for="article_image">Image for the article</label> 
         <input type="file" name="pic" id="article_image" ref= "article_image" accept="image/*" /> 
         <div id="image_placeholder" onClick={this.insertImage} onChange={this.displayImage} ref="imagePlaceholder"> 
          <p>Click here to add an image</p> 
         </div> 
        </form> 
       </div> 
      </div> 
     ); 
    } 
} 

Answer 1

はたぶんのonChangeがにする必要があります代わりに、基礎となるのdiv