React切换显示模式

Question

我是React中的新手，我无法弄清楚为什么我的显示不会更改（切换）。我有三个按钮应在屏幕> 800px 中显示的。在屏幕中＆lt;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>

谢谢！

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;