如何處理React.js組件內的img onChange事件

Question

我有下一個和上一個按鈕，我想遍歷一些圖像。當用戶選擇下一個或上一個時，我希望父組件知道它。 我的問題是，我似乎無法從子組件img元素中捕獲onChange事件。通過更新imgsrc屬性來更改圖像。

可能值得注意的是，如果我做<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}/>; 

您可能需要設置狀態爲ar getImageSrc函數的引用並在視圖中使用該狀態，並將更改檢查邏輯移動到getImageSrc中。所以它正確地重新渲染視圖