React在路由变更中打开模态

我正在用登录模式构建React/Redux应用程序，当用户导航到/user/signin时应打开该模式。在页面组件加载之前，调度一个动作来设置isModalOpen为true。
模态组件使用connect将模态状态映射到道具。但是，当页面加载时，模块组件在从父页面组件分派更新之前似乎正在接收模态。我试过将isModalOpen作为道具从页面组件中传递下来，当我导航到路线时它正确地显示模态。除了当我通过模态组件分派动作以将isModalOpen设置为false并关闭模态时，父组件上的道具不会更新，因此模态保持关闭状态。React在路由变更中打开模态

这里是我使用的代码：

用户登录页面组件

class UserSignInPage extends React.Component { 
    componentWillMount() { 
    this.props.openModal() 
    } 

    componentWillUnMount() { 
    this.props.closeModal() 
    } 

    render() { 
    const { location, isModalOpen } = this.props 
    return (
     <StackedMenuTemplate header={<Header />} menu={<Navigation />} footer={<Footer />}> 
     <Overview /> 
     <SignInForm redirectTo={location.query.redirect} isModalOpen /> 
     </StackedMenuTemplate> 
    ) 
    } 
} 

UserSignIn.propTypes = { 
    isModalOpen: PropTypes.bool, 
    location: PropTypes.object, 
    openModal: PropTypes.func.isRequired, 
    closeModal: PropTypes.func.isRequired, 
} 

const mapStateToProps = (state) => ({ 
    isModalOpen: isOpen(state, 'LOGIN'), 
}) 

const mapDispatchToProps = (dispatch) => ({ 
    openModal:() => { 
    dispatch(modalShow('LOGIN')) 
    }, 
    closeModal:() => { 
    dispatch(modalHide('LOGIN')) 
    }, 
}) 

export default connect(
    mapStateToProps, 
    mapDispatchToProps 
)(UserSignIn)

用户登录模式容纳

const handleSubmit = (values, dispatch) => { 

}) 

const mapStateToProps = (state) => ({ 
    isAuthenticated: state.auth.isSignedIn, 
    isModalOpen: isOpen(state, 'LOGIN'), 
}) 

const mapDispatchToProps = (dispatch, ownProps) => ({ 
    handleLogout:() => { 
    dispatch(logout()) 
    }, 
    handleRedirect:() => { 
    dispatch(push(ownProps.redirectTo || '/')) 
    }, 
    handleModalClose:() => { 
    dispatch(modalHide('LOGIN')) 
    }, 
}) 

export default connect(
    mapStateToProps, 
    mapDispatchToProps 
)(
    reduxForm({ 
    form: 'UserSignIn', 
    onSubmit: handleSubmit, 
    })(Form) 
)

用户登录表单组件

class UserSignInForm extends Component { 
    componentWillMount() { 
    this.props.handleLogout() 
    } 

    componentWillReceiveProps(nextProps) { 
    if (!this.props.isAuthenticated && nextProps.isAuthenticated) { // true after successful submit 
     this.props.handleRedirect() 
    } 
    } 

    shouldComponentUpdate(nextProps) { 
    if (this.props.isModalOpen === nextProps.isModalOpen) { 
     return false 
    } 
    } 

    render() { 
    const { handleSubmit, isModalOpen, handleModalClose } = this.props 

    return (
     <Modal open={isModalOpen} onClose={handleModalClose} closeIcon='close'> 
     <Modal.Header content='Sign In' /> 
     <Form onSubmit={handleSubmit}> 
      <Modal.Content> 
      <Form.Field> 
       <label>Email</label> 
       <Field name='email' component={Input} type='email' /> 
      </Form.Field> 
      <Form.Field> 
       <label>Password</label> 
       <Field name='password' component={Input} type='password' /> 
      </Form.Field> 
      </Modal.Content> 
      <Modal.Actions> 
      <Button type='submit'> 
      Sign In 
      </Button> 
      </Modal.Actions> 
      <div> 
      <Link to='/user/forgot-password' > 
       Forgot Password? 
      </Link> 
      </div> 
     </Form> 
     </Modal> 
    ) 
    } 
} 

UserSignInForm.propTypes = { 
    isModalOpen: PropTypes.bool, 
    handleModalClose: PropTypes.func.isRequired, 
    isAuthenticated: PropTypes.bool.isRequired, 
    handleLogout: PropTypes.func.isRequired, 
    handleRedirect: PropTypes.func.isRequired, 
    handleSubmit: PropTypes.func.isRequired, 
} 

export default UserSignInForm

来源

2017-05-08 z-a-h

首先我不认为你需要在页面组件和表单组件上使用连接。第二，如果将控制模态的变量设置为反应状态而不是redux，则会更容易。 –

我考虑过使用反应状态而不是使用redux，但是我认为最好将所有状态都隔离到redux。如果我将它移动到本地状态，我会将它设置在页面组件中，然后将它传递给表单组件？或者只是将它隔离在表单组件中？ –

我最终解决了这个问题。我正在从我的选择器中错误地获取状态。

哎呦！

来源

2017-05-09 00:23:25

React在路由变更中打开模态

回答

相关问题