0
私はReactstrapとのログインリンクを持つヘッダーを構築しています。ユーザーがログインのリンクをクリックすると、モーダルは、ログインするためのさまざまなオプションを示す表示されます。ここに私のコードです:。Reactstrap Modalがフェードインしないでフェードアウトします
export default class Header extends Component {
state = {
isOpen: false,
modal: false
}
toggle =() => this.setState({ isOpen: !this.state.isOpen })
toggleModal =() => this.setState({ modal: !this.state.modal })
render() {
return (
<div>
<Navbar light expand="md">
<NavbarBrand href="/">VoteMole</NavbarBrand>
<NavbarToggler onClick={this.toggle} />
<Collapse isOpen={this.state.isOpen} navbar>
<Nav className="ml-auto" navbar>
<NavLink href="#" onClick={this.toggleModal}>
<NavItem>Login</NavItem>
</NavLink>
</Nav>
</Collapse>
</Navbar>
<Modal isOpen={this.state.modal} toggle={this.toggleModal}>
<ModalBody>Lorem Ipsum</ModalBody>
</Modal>
</div>
)
}
}
私がいる問題は、モーダルのみフェードアウトということですが、フェードインしませんデフォルトでは、Modalコンポーネントはfade propがtrueに設定されています。私は手動でfade={true}
またはちょうどfade
で設定しようとしました。それは問題を解決しませんでした。私はフェード効果を引き起こすためにmodalTransitionとbackdropTransitionの小道具を設定しようとしました。それでも動作しませんでした。誰かがこの問題を助けてくれますか?
あなたの答えをありがとう。私はReact 16でしか起こっていないバグがあるのだろうか?ドキュメントの例がうまく動作し、Reactの古いバージョンを使用していると仮定しているためです。 – avatarhzh