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

Reactjs onChange不起作用

1 个答案: