2017-11-03 53 views
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の小道具を設定しようとしました。それでも動作しませんでした。誰かがこの問題を助けてくれますか?

答えて

1

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

+0

あなたの答えをありがとう。私はReact 16でしか起こっていないバグがあるのだろうか?ドキュメントの例がうまく動作し、Reactの古いバージョンを使用していると仮定しているためです。 – avatarhzh