我想要做的是传入另一个组件,该组件将使用此语法替换按钮。
<EmailDrop>
<AnotherComponent />
</EmailDrop>
我想一定有一种方法可以做到这一点,但我甚至很难知道要用谷歌找到什么。我是否可以将函数作为道具传递给它?
我觉得我缺少一些非常基本的东西。
import React, { Component } from 'react';
class EmailDrop extends Component {
constructor() {
super();
this.state = {
showMenu: false,
};
this.showMenu = this.showMenu.bind(this);
this.closeMenu = this.closeMenu.bind(this);
}
showMenu(event) {
event.preventDefault();
this.setState({ showMenu: true }, () => {
document.addEventListener('click', this.closeMenu);
});
}
closeMenu(event) {
if (!this.dropdownMenu.contains(event.target)) {
this.setState({ showMenu: false }, () => {
document.removeEventListener('click', this.closeMenu);
});
}
}
render() {
return (
<div>
<button onClick={this.showMenu}>
Show menu
</button>
{
this.state.showMenu
? (
<div
className="menu"
ref={(element) => {
this.dropdownMenu = element;
}}
>
<button> Menu item 1 </button>
<button> Menu item 2 </button>
<button> Menu item 3 </button>
</div>
)
: null
}
</div>
);
}
}
export default EmailDrop