Реагируйте, чтобы переключить режим отображения

Question

Я новичок в React и не могу понять, почему мой дисплей не меняется (тумблер). У меня три кнопки , которые должны быть отображается на экране> 800px .На экране <800px, только активная кнопка должна быть видимой </strong>.Нажав на активную кнопку, она также должна показать две другие кнопки ... Она в первый раз переключается с 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;