У меня есть следующие и предыдущие кнопки, и я хочу пересечь некоторые изображения. Когда пользователь выбирает следующий или предыдущий, я хочу, чтобы родительский компонент знал об этом. Моя проблема в том, что я не могу уловить событие onChange
от дочернего компонента img
. Изображение изменяется путем обновления атрибута img
src
.Как обработать событие img onChange внутри компонента React.js
Возможно, стоит отметить, что если я делаю <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>
);
}
});
Как изменяет img? – dandavis
Я обновляю img src. – monkeyjumps
, который должен срабатывать при загрузке, но я никогда не слышал об обмене стрельбой из img до ... – dandavis