0

Reactstrap とのログイン リンクを持つヘッダーを作成しています。ユーザーがログイン リンクをクリックすると、ログイン用のさまざまなオプションを示すモーダルが表示されます。これが私のコードです。

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>
        )
    }
}

私が抱えている問題は、モーダルがフェードアウトするだけでフェードインしないことです。デフォルトでは、モーダル コンポーネントのフェード プロパティは true に設定されています。fade={true}手動で、または省略形だけで設定しようとしましたfade。問題は解決しませんでした。modalTransition と BackgroundTransition の小道具を設定して、フェード効果をトリガーしようとしました。それでもうまくいきませんでした。誰かがこの問題を手伝ってくれますか?

4

1 に答える 1

1

残念ながら、これは reactstrap のバグのようです。ここでオープンな Github の問題を参照してください: https://github.com/reactstrap/reactstrap/issues/607

于 2017-11-03T08:17:33.060 に答える