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