如何在React.js组件中处理img onChange事件

Question

我有下一个和上一个按钮，我想遍历一些图像。 当用户选择下一个或上一个时，我希望父组件对此有所了解。 我的问题是我似乎无法从子组件img元素中捕获onChange事件。 通过更新img src属性来更改图像。

可能值得注意的是，如果我执行<img onchange=alert('heelo') /> ， alert正确触发。

我有以下2个组成部分：

子组件：

var ImageViewer = React.createClass({
    getInitialState: function () {
        return {
            pages: [],
            currentPage: 0,
            imagePath: ""            
        };
    },
    handleImageLoad: function (event) {
        console.log("Image load event fired -->", event.target.tagName);        
        //this.setState({                
        //    currentPage: this.props.document.currentPage
        //}, function () {
        //    console.log("Current Page state is set");
        //    console.log(this.state.currentPage);                    
        //});

    },   
    errorLoadingImage: function (event) {
        console.log("Image load error event -->", event.target.tagName);
        console.log("pathname : " + window.location.pathname);
        var loginPath = window.location.pathname.split('/');        
        if (loginPath.length > 1) {
            //   window.location.replace("/" + loginPath[1]);
            window.location.replace(window.location.pathname);
        } else {
            console.log("Error: Can not redirect user to login path");
            console.log("window.location : " + window.location);
            console.log("window.location.pathname : " + window.location.pathname);
        }
    },
    getImageSrc: function () {
        var imagePath = this.props.document.ImageRoute,
            imageDirectory = imagePath.substring(0, imagePath.lastIndexOf('/') + 1);
        console.log("Image source from page : " +this.state.currentPage);
        //current page state gets update in prev and next events.
        var fileName = this.props.document.Pages[this.state.currentPage].FileName;
        console.log(fileName);
        console.log("loading file : " + imageDirectory + fileName);
        return (imageDirectory + fileName);
    },
    handleChange: function (event) {
        this.props.callback(event.target.value);
    },
    renderImage: function () {  
        if (this.props.document == null) {
            return <img src='' />;
        } else {            
            return <img className="imageDisplay" src={this.getImageSrc()} onChange={this.handleChange.bind(this)} onLoad={this.handleImageLoad} onError={this.errorLoadingImage}/>;
        }
    },
    render: function () {
        console.log("rendering image viewer")
        console.log("document is " + this.props.document)
        return (
            <div onClick={this.clickHandler}>              
                {this.renderPager()}     
                {this.renderImage()}                                                     
            </div>
        );
    }
});

父组件：

var Workstation = React.createClass({
    getInitialState: function () {
        return {
            documentsInQueue: this.props.documentList,
            ImageSrc: this.props.imgSrc,
            currentDocument: null,
            currentPage : 0
        };
    },
    selectedDocument: function (document, clickedDocumentIndex) {
        console.log("selected document is :");
        console.log(document);
        console.log("clicked document index is :");
        console.log(clickedDocumentIndex);
        this.setState({ currentDocument: document }, function () {
            console.log("Image Route state is set")
            console.log(this.state.currentDocument.ImageRoute)
        });
    },
    onImageViewerPageChange: function (event) {
        console.log("current page from event : " + currentPage);
        this.setState({ currentPage: currentPage }, function () {
            console.log("Workstation: Current Page state is set")
            console.log(this.state.currentPage)
        });
    },
    render: function () {
        return (
            <div className="container-fluid">
                <div className="row">
                    <div className="document col-md-2 border-outline">
                        <DocumentQueue initialData={this.state.documentsInQueue} imgSrc={this.state.ImageSrc} selectedDocument={this.selectedDocument} currentPage={this.state.currentPage}/>
                    </div>
                    <div className="col-md-2 border-outline">                        
                        <Indexing document={this.state.currentDocument} />                                                          
                    </div>
                    <div className="col-md-8 border-outline imageViewer">
                        <ImageViewer document={this.state.currentDocument} callback={this.onImageViewerPageChange}/>                        
                    </div>
                </div>
            </div>
        );
    }
});

Answer 1

理论答案：

this.imageUrl = this.getImageSrc();
if this.previousUrl != this.imageUrl {
    this.handleChange.bind(this);
}
this.previousUrl = this.imageUrl;
return <img className="imageDisplay" src={this.imageUrl} onLoad={this.handleImageLoad} onError={this.errorLoadingImage}/>;

您可能希望通过getImageSrc函数设置状态并在视图中使用该状态，并将更改检查逻辑移至getImageSrc中。 因此它正确地重新呈现了视图