[英]Converting JS code to React.js, can't see what I'm doing wrong
一個簡單的問題是我已經堅持了一段時間。 我有一些普通的JS代碼,可以上傳文件並顯示用戶在瀏覽器中上傳的內容。
在我的代碼下面,我正在嘗試將我的原始JS轉換為react.js代碼。 在香草,我可以巢readAndPreview()
內previewImages()
但在react.js我得到一個錯誤Unresolved method or function readAndPreview()
在我的IDE(非控制台),為何如此?
我在做什么錯,我該如何解決? 我願意接受任何批評:)。
import React, {Component} from 'react';
class Wall extends Component {
constructor(props) {
super(props);
this.previewImages = this.previewImages.bind(this);
this.readAndPreview = this.readAndPreview.bind(this);
}
previewImages() {
const preview = React.createElement('div');
if (this.files) {
[].forEach().call(this.files, this.readAndPreview());
}
readAndPreview() {
if (!/\.(jpe?g|png|gif)$/i.test(file.name)) {
return alert(file.name + " is not an image");
}
let reader = new FileReader();
reader.addEventListener("load", () => {
let image = new Image();
image.height = 100;
image.title = file.name;
image.src = this.result;
let date = Date.now();
let d = new Date(parseInt(date, 10));
let ds = d.toString('MM/dd/yy HH:mm:ss');
console.log(ds);
let initialCountOfLikes = 0;
const zeroLikes = React.createElement('h1');
let zeroLikesTextNode = zeroLikes.createTextNode(initialCountOfLikes + " likes");
zeroLikes.appendChild(zeroLikesTextNode);
preview.appendChild(image); // makes image appear
preview.appendChild(zeroLikes); // makes like count appear
image.ondblclick = function (event) {
if (initialCountOfLikes === 0) {
console.log("Inside if block");
initialCountOfLikes++;
console.log("initialCountOfLikes++ => " + initialCountOfLikes);
} else if (initialCountOfLikes === 1) {
console.log("inside second else if block");
initialCountOfLikes--;
console.log("initialCountOfLikes-- => " + initialCountOfLikes);
}
zeroLikesTextNode.nodeValue = initialCountOfLikes + " likes";
};
});
reader.readAsDataURL(file);
document.querySelector('#file-input').addEventListener("change", this.previewImages);
}
}
render() {
return (
<div id="file-input-wrapper">
<input type="file"/>
<label htmlFor="file-input" id={"LblBrowse"}></label>
{this.readAndPreview()}
</div>
);
}
}
export default Wall;
如果您想在另一個內部嵌套一個本地函數,歡迎這樣做,但是您需要在它function readAndPreview() {
加上function
,如function readAndPreview() {
。 請注意,這僅是previewImages
的包含函數內部的局部變量。它不是Wall
上的方法。 無法從外部previewImages
甚至是在您使用readAndPreview
而不是this.readAndPreview
引用的PreviewImages內部訪問它。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.