0
各ユーザーのイメージがあるヘッダーを作成しています。画像を押すと、ログアウトや設定などのオプションを含むドロップダウンメニューが表示されます（Facebookなどのユーザーのドロップダウンに似ています）。私はトグル効果を使用しているので、私はこのようにそれを行うにしようとしていた私は別のコンポーネントにドロップダウンを作成し、ヘッダ・コンポーネントにそれを渡すために考えられてきたが、私はそれが仕事を得ることができませんでしたReactでヘッダーのサイズを変更せずにヘッダーからドロップダウンを作成
class Header extends React.Component {
constructor() {
super();
this.state = {
showOptions: false
};
}
render() {
let dropDownMenu;
if(this.state.showOptions){
dropDownMenu = <div className="dropDownMenu">Hello</div>
};
return (
<header className="fullWidth">
<div className="search">
<p className="courses">Courses</p>
<p>Search</p>
<input type="text" placeholder="Search"/>
<img src="https://en.opensuse.org/images/0/0b/Icon-user.png" className="userImage" onClick={this._handleClickA.bind(this)}/>
{dropDownMenu}
</div>
</header>
);
}
_handleClickA(){
this.setState({
showOptions: !this.state.showOptions
});
}
}
ReactDOM.render(< Header />, document.getElementById('header'));
に反応。私はそれを切り替えると、ヘッダー全体のサイズが変更され、ヘッダーの潜在的な他の色でドロップダウンを作成したいだけです。
どうすればいいですか？