Reactjs onChange 不起作用

我想构建一个组件，用户可以在其中上传图像并在上传图像之前显示图像。文件的输入字段是隐藏的，而是在用户可以单击的位置显示一个div，它将在输入字段上触发单击事件，这将使用户能够插入图像。

这一切都工作正常，但是当用户插入图像时，不会触发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>
        );
    }
}