我有一个用React创建的专辑应用程序,我有3个主要的js文件: App.js,LeftMenu.js,RightContent.js。LeftMenu.js包含了所有与网站菜单相关的代码,我在那里放了一个重置按钮。该RightContent.js包含所有的材料,专辑,详细资料的专辑。在App.js中,我写了这样的回报:
render() {
return (
<div>
<LeftMenu />
<RightContent albumdata = {this.state.albumdata}
getAlbumData = {this.getAlbumData}
albumthumbnail = {this.state.albumthumbnail}
getAlbumThumbnail = {this.getAlbumThumbnail}
/>
</div>
);
}
在LeftMenu.js中有以下几行:
import React, { Component } from 'react'
import './LeftMenu.css'
import RightContent from './RightContent.js'
class LeftMenu extends Component {
constructor(props){
super(props);
this.state = {
RCVisible: true
}
}
render() {
function ResetState() {
this.setState(prevState => ({ RCVisible: !prevState.RCVisible }))
}
return (
<div class="content">
<div class="logo"></div>
<a href="#" class="albumbutton">Albums</a>
<div class="break"></div>
<a href="#" class="resetbutton" onClick={ResetState}>Reset</a>
</div>
);
}
}
export default LeftMenu;
RightScreen.js是与专辑thingy相关的代码。
问题是,我想有一个在LeftMenu.js上的按钮名称“重置”,以便当它被点击时,RightContent.js将被隐藏,以便在页面上只留下菜单。我试着在这里找到解决方案,但没有给我方向。
发布于 2018-12-13 13:03:33
您应该将状态从LeftMenu.js向上移动到App.j组件。还要将回调函数ResetState()移动到App.js。然后将回调函数作为道具发送给LeftMenu组件以供使用。
这样,您就可以在应用程序中设置状态,并使用条件逻辑根据状态呈现RightScreen组件。
https://stackoverflow.com/questions/53761840
复制相似问题