i构建了React
组件Toggle Menu
,该组件由按钮触发。初始打开后,我看不到菜单打开/关闭。在如何开始解决此问题的情况下有点丢失...这是我用于参考如何使用ReactJS
export default class ToggleMenu extends React.Component {
showRight = () => {
this.right.show();
}
constructor(props) {
super(props);
this.showRight = this.showRight.bind(this);
}
render() {
return (
<div>
<button onClick={this.showRight}>Show Right Menu!</button>
<Menu ref={right => this.right = right} alignment="right">
<MenuItem hash="first-page">First Page</MenuItem>
<MenuItem hash="second-page">Second Page</MenuItem>
<MenuItem hash="third-page">Third Page</MenuItem>
</Menu>
</div>
);
}
}
export default class Menu extends React.Component {
state = {
visible: false,
};
show() {
this.setState({ visible: true });
}
hide() {
this.setState({ visible: false });
}
render() {
const { visible } = this.state;
return (
<div className="menu">
{
visible &&
<div className={this.props.alignment}>{this.props.children}</div>
}
</div>
);
}
}
通过将状态移至主togglemenu,您可以使此组件保持菜单的可见性。
class ToggleMenu extends React.Component {
constructor(props) {
super(props);
this.state = {
visible: false
};
this.toggleMenu = this.toggleMenu.bind(this);
}
toggleMenu() {
this.setState({visible: !this.state.visible})
}
render() {
return (
<div>
<button onClick={this.toggleMenu}>Show Right Menu!</button>
{this.state.visible && <Menu alignment="right">
<MenuItem hash="first-page">First Page</MenuItem>
<MenuItem hash="second-page">Second Page</MenuItem>
<MenuItem hash="third-page">Third Page</MenuItem>
</Menu>}
</div>
);
}
}
这使我可以将您的菜单更改为无状态组件:
const Menu = ({alignment, children}) => (
<div className="menu">
<div className={alignment}>{children}</div>
</div>
);
我在这里创建了一个WebPackbin(现在使用动画(:https://www.webpackbin.com/bins/bins/-klh1vm-n4rdckebkk67
对于过渡和动画,我建议您查看https://github.com/reaectjs/reaect-transition-group
export default class ToggleMenu extends React.Component {
constructor(props) {
super(props);
this.state = { rightMenu: false }
this.showRight = this.showRight.bind(this);
}
showRight = () => {
this.setState({ rightMenu: !this.state.rightMenu })
}
render() {
return (
<div>
<button onClick={this.showRight}>Show Right Menu!</button>
<Menu className={ this.state.rightMenu ? "displayBlock" : "displayNone"} ref={right => this.right = right} alignment="right">
<MenuItem hash="first-page">First Page</MenuItem>
<MenuItem hash="second-page">Second Page</MenuItem>
<MenuItem hash="third-page">Third Page</MenuItem>
</Menu>
</div>
);
}
}
//Style code
.displayBlock{ display: block }
.displayNone{ display: none}
class App extends React.Component {
state = {
messageVisibility: true
}
toggleMessage = () => {
this.setState({
messageVisibility: !this.state.messageVisibility
})
}
render() {
return(
<div>
<button onClick={this.toggleMessage}>Toggle Message</button>
{this.state.messageVisibility ? <p>Toggle Content</p> : null}
</div>
)
}
}
将EventListener添加到您的按钮。
//Add ID to the button
<button id = "toggle"></button>
//Outside the render method
document.getElementById('toggle').addEventListener('click', function(e){
If(e.target.style.display="none") {
this.right.show()
} Else {
this.right.hide()
}
}(