React 切换显示模式

debugcn 发表于 Dev

山姆

我是 React 的新手，我不明白为什么我的显示没有改变（切换）。我有三个按钮，它们应该显示在屏幕上 > 800px。在屏幕 < 800px 中，只有活动按钮应该是 visibel。通过单击活动按钮，它也应该显示其他两个按钮......它第一次从 inlineBlock 切换到无，但之后它对动作没有反应......

import React, {Component} from 'react';

class Tags extends Component {
    constructor(props) {
        super(props);
        this.state = {
            smallScreen: window.innerWidth < 800,
            tags: [
                {"id": 1, "title": "World Of Tanks"},
                {"id": 2, "title": "World Of Warplanes"},
                {"id": 3, "title": "World Of Warship"},
            ],
            activeTags: {"id": 2, "title": "World Of Warplanes"},
            displayingA: "inlineBlock",
            displayingB: "none",
        }
    }

    onClickBtn = (tag) => {
        console.log(this.state.displayingA);
        console.log(this.state.displayingB);
        console.log(this.state.activeTags);

        if (this.state.smallScreen) {
            if (tag.id === this.state.activeTags.id) {
                this.getStyles();
                console.log("change show/hide style");
            } else {
                this.getStyles();
                this.setState({activeTags: tag});
                console.log("make this btn active");
            }
        } else {
            this.setState({activeTags: tag});
            console.log("make this btn active big screen");
        }
    };

    getStyles = () => {
        if (this.state.displayingB === "none") {
            console.log("change show");
            this.setState({displayingB: "inlineBlock"})
        } else {
            console.log("change hide");
            this.setState({displayingB: "none"})
        }
    };

    activeTag = (title) => "-> " + title;

    render() {
        const {tags, activeTags, smallScreen, displayingA, displayingB} = this.state;

        // 1300 px
        const listItem = tags.map((tag) => (
            <button
                style={tag.title !== activeTags.title && smallScreen ? {display: displayingB} : {display: displayingA}}
                className={tag.title === activeTags.title && !smallScreen ? "activeTag" : "btn"}
                key={tag.id}
                onClick={this.onClickBtn.bind(this, tag)}>
                {tag.title === activeTags.title && smallScreen ? this.activeTag(tag.title) : tag.title}
            </button>
        ));

        return (
            <>
                <div className="tagsSection">
                    {listItem}
                </div>
                <div className="gridTags">
                    {listItem}
                </div>
            </>
        );
    }
}

export default Tags;

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.1.1/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.1.1/umd/react-dom.production.min.js"></script>

谢谢！

山姆

我以某种方式想出了问题所在。

不知何故，我输入了“inlineBlock”而不是“inline-block”。这个错字并没有让样式从无更改为内联块。这是代码：

import React, {Component} from 'react';

class Tags extends Component {
    constructor(props) {
        super(props);
        this.state = {
            smallScreen: window.innerWidth < 800,
            tags: [
                {"id": 1, "title": "World Of Tanks"},
                {"id": 2, "title": "World Of Warplanes"},
                {"id": 3, "title": "World Of Warship"},
            ],
            activeTags: {"id": 2, "title": "World Of Warplanes"},
            displaying: "none",
        }
    }

    // This method will be called each time user clicked on a button and will change the style and state (active tag)
    onClickBtn = (tag) => {
        if (this.state.smallScreen) {
            if (tag.id === this.state.activeTags.id) {
                this.getStyles();
            } else {
                this.getStyles();
                this.setState({activeTags: tag});
            }
        } else {
            this.setState({activeTags: tag});
        }
    };

    // This method will be called from the onClickBtn method for changing the state
    getStyles = () => {
        if (this.state.displaying === "none") {
            this.setState({displaying: "inline-block"})
        } else {
            this.setState({displaying: "none"})
        }
    };

    // This method will add the "->" before the title of active tag in small screen
    activeTag = (title) => "-> " + title;

    render() {
        const {tags, activeTags, smallScreen, displaying} = this.state;

        // 1300 px
        const listItem = tags.map((tag) => (
            <button
                style={tag.title !== activeTags.title && smallScreen ? {display: displaying} : {display: "inline-block"}}
                className={tag.title === activeTags.title && !smallScreen ? "activeTag" : "btn"}
                key={tag.id}
                onClick={this.onClickBtn.bind(this, tag)}>
                {tag.title === activeTags.title && smallScreen ? this.activeTag(tag.title) : tag.title}
            </button>
        ));

        return (
            <>
                <div className="tagsSection"> {/* screens > 800px */}
                    {listItem}
                </div>
                <div className="gridTags"> {/* screens < 800px */}
                    {listItem}
                </div>
            </>
        );
    }
}

export default Tags;

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。