问题描述
我是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>
谢谢！
1楼
SamL
0
已采纳
2019-02-13 16:59:18
我不知何故找出了问题所在。
我以某种方式键入“ 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;