Question

快速问题，我有一段时间被坚持。我有一些普通的JS代码，可以上传文件并显示用户在浏览器中上传的内容。

在我的代码下面，我试图将我的原始JS转换为react.js代码。在香草中，我可以将readAndPreview()嵌套在previewImages()中，但是在react.js中，我在IDE（不是控制台）中收到错误Unresolved method or function readAndPreview()，为什么这样？

我在做什么错，我该如何解决？我愿意接受任何批评：）。

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;

Answer 1

如果要将局部函数嵌套在另一个函数中，则欢迎这样做，但是您需要像在// Just the portion that includes the intents array "intents": [ { "name": "IntentName", "version": "1", "fulfillmentActivity": { "type": "ReturnIntent" }, "sampleUtterances": [ "Utterance 1", "Utterance 2", "Utterance 3" ], "slots": [ { "sampleUtterances": [], "slotType": "Slot Name", "slotTypeVersion": "1", "slotConstraint": "Optional", "valueElicitationPrompt": { "messages": [ { "contentType": "PlainText", "content": "Slot Prompt" } ], "maxAttempts": 2 }, "priority": 1, "name": "Slot Name (provided by developer)" } ], "conclusionStatement": { "messages": [ ] } }, { "name": "Intent 2", "version": "3", "fulfillmentActivity": { "type": "ReturnIntent" }, "sampleUtterances": [ "Utterance 1", "Utterance 2", "Utterance 3" ], "slots": [], "conclusionStatement": { "messages": [ ] } }, // repeat for all other intents中那样在其前面加上function作为前缀。请注意，这只会是function readAndPreview() {的包含函数内部的局部变量，而不是previewImages上的方法。无法从Wall外部访问它，甚至不能在previewImages而不是readAndPreview

引用的PreviewImage内部访问它。

将JS代码转换为React.js，看不到我在做什么

1 个答案: