反应切换显示模式

Question

我是React的新手，我无法弄清楚为什么我的显示器不会改变（切换）。我有三个按钮，应该在屏幕上显示> 800px。在屏幕<800px中，只有活动按钮应该是可见的。通过单击活动按钮，它也应该显示另外两个按钮...它首次从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>

谢谢！

Answer 1

我以某种方式弄清楚问题是什么。

不知何故，我键入了“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;