Reactjs onChange funktioniert nicht

Question

Ich möchte eine Komponente erstellen, wo Benutzer ein Bild hochladen und das Bild vor seinem Upload anzeigen können. Das Eingabefeld für die Datei ist ausgeblendet, stattdessen wird ein div angezeigt, auf das der Benutzer klicken kann, und es wird das click-Ereignis im Eingabefeld ausgelöst, wodurch der Benutzer ein Bild einfügen kann.

Das funktioniert alles gut, aber wenn der Benutzer ein Bild einfügt, wird onChange() nicht ausgelöst. Was mache ich falsch?

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

Attach onChange am Eingang statt des zugrunde liegenden div