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

理论答案：

/**
* Reads the next line from the Scanner
*/
protected String getNextLine(Scanner scanner) {
  //You know how to do that.
}

/** 
*  Check if file contains that name and return matching line.
*  Throws NameNotFoundException (you'd need to create) if not found.
*
*  If it were my code, i'd refactor even more and pass in List<String> 
*  here with the lines from the file
*/
public String matchSurname(String name, File dataFile) throws NameNotFoundException {
   //Iterate over file... 
      if(isMatchingSurname(name, line)) {
        return line;
      }
   // end iteration
   //Still here? Throw Exception!
   throw new NameNotFoundException();
}

/**
* Checks if given Name matches the read line
*/
public boolean isMatchingSurname(String name, String lineFromFile) {
  //All the checks
}

您可能希望将状态设置为getImageSrc函数的结果并在视图中使用该状态，并将更改检查逻辑移动到getImageSrc中。所以它正确地重新呈现视图

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

1 个答案: