javascript - 如何在 React.js 组件内处理 img onChange 事件

Question

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

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

我有以下两个组件:

子组件:

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 函数的结果并在 View 中使用该状态，并将更改检查逻辑移至 getImageSrc 中。所以它正确地重新渲染 View