在React-Redux应用程序中模态框未打开

阿尔斯兰·塔里克(Arslan Tariq)

我正在使用React-Redux应用程序,当前正在通过单击表单按钮来显示模式框。但是我不能使它工作。我已经尝试了很多事情,但无法弄清为什么没有出现模式框。这是我的代码。

模态组件文件

import React from 'react'
import { connectModal } from 'redux-modal'
import { Button, Modal } from 'react-bootstrap'
import UpdatePasswordForm from 'forms/updatepassword'

export class UpdatePassword extends React.Component {
  constructor(props) {
    super(props)
  }

  renderCloseIcon (handleHide) {
    return (
      <button className='close' onClick={ handleHide }>
            <span>
            <i className="modal__close"/>
          </span>
      </button>
    )
  }

  renderModalLogo () {
    return (
      <div className="modal__header modal__header_login">
        <div className="modal__logo"></div>
      </div>
    )
  }

  render() {
    const { show, handleHide } = this.props

    return (
      <Modal
        show={ show }
        onHide={ handleHide }
        backdrop={ true }
        className="modal_dark modal_center"
        dialogClassName="modal-background-fix">
        <div className="modal__container">
          { this.renderCloseIcon(handleHide) }
          { this.renderModalLogo() }
          <div className="modal__content">
            <UpdatePasswordForm onSubmit={() => {}}/>
          </div>
        </div>
      </Modal>
    )
  }
}

export default connectModal({name: 'updatepassword'})(UpdatePassword)

在模态中加载的表格

import React from 'react'
import { Field, reduxForm } from 'redux-form'
import Text from '../containers/Text'

const I18n = {}
I18n.t = Text.t

const UpdatePasswordForm = (props) => {
  const { handleSubmit, pristine, reset, submitting } = props
  return (
    <form onSubmit={handleSubmit}>
      <fieldset className="form-group">
        <Field name="current_password" component="input"
               type="password" placeholder="Password" className="form-control" />
      </fieldset>

      <fieldset className="form-group">
        <Field name="password" component="input"
               type="password" placeholder="New Password" className="form-control" />
      </fieldset>

      <fieldset className="form-group">
        <Field name="password_confirm" component="input" type="password"
               placeholder="New password confirmation" className="form-control" />
      </fieldset>

      <fieldset className="form-group form-group_btns">
        <button type="submit" disabled={pristine || submitting} className="btn btn-primary btn-block">
          { 'CHANGE PASSWORD' }
        </button>
      </fieldset>
    </form>
  )
}

export default reduxForm({
  form: 'updatepassword'  // a unique identifier for this form
})(UpdatePasswordForm)

模态文件

import React from 'react';
import './EditInformation.scss'
import { show } from 'redux-modal'
import UpdatePassword from './Modals/UpdatePassword'

// TODO fix stylee stylee
// TODO onChange is not updating correctly, FIX!

const EditInformation = ({ onSubmit, onChange, user, formSubmitting }) => {
  return (
    <div>
      <UpdatePassword />

      <form className='form-line form-line_light'>
        <div className='col-xs-16 col-sm-8'>
              <fieldset className='form-group'>
                <button
                  onClick={(e) => {
                    show('updatepassword')
                    e.preventDefault()                        
                  }}
                  className='btn btn-secondary btn-lg profile-edit__addcard'
                  style={ { position: 'relative', top: '-27px' } }>
                  <i className='fa fa-plus'/>Vaihda salasana
                </button>
              </fieldset>
        </div>
      </form>
   </div>
  );
};

export default EditInformation;
阿尔斯兰·塔里克(Arslan Tariq)

我现在发现了一个愚蠢的错误。但是我应该得到一个我没有得到的错误。我必须将“ show”传递给我现在完成的const EditInformation,并且一切正常。这是代码的一部分:

const EditInformation = ({ onSubmit, onChange, user, formSubmitting, show }) => { 

我以前没有通过“表演”。

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

React Native深度链接应用程序未打开

来自分类Dev

js承诺中未捕获的错误在React / Redux应用程序中

来自分类Dev

CORS在React / Redux应用程序中执行API调用

来自分类Dev

在React / Redux应用程序中隐藏API URL(代理)

来自分类Dev

在react-redux-promise应用程序中解析XML

来自分类Dev

来自React / Redux应用程序中组件的权限检查

来自分类Dev

react-redux应用程序中的状态对象结构

来自分类Dev

在react-redux-promise应用程序中解析XML

来自分类Dev

react-redux 应用程序中的重复操作

来自分类Dev

调试“react-redux”应用程序?

来自分类Dev

我遇到了未捕获的不变违反:找不到react-redux上下文值;即使我的应用程序包装在提供程序中

来自分类Dev

使用 Redux-Observable 在 React-Redux-Firebase 应用程序中实现自动保存

来自分类Dev

在React Native中从模态打开模态

来自分类Dev

从iOS中的另一个应用程序打开设置应用程序-React Native

来自分类Dev

在托管应用程序中打开时,React js应用程序的CSS样式将被覆盖

来自分类Dev

react-admin:如果要在非redux应用程序中嵌入react-admin,是否需要在应用程序中安装redux?

来自分类Dev

在Web浏览器中打开到React-Native应用程序的Deeplink

来自分类Dev

如何在React Native Android中打开应用程序设置页面?

来自分类Dev

为什么vscode在边缘而不是Chrome中打开React应用程序?

来自分类Dev

如何在整个应用程序中打开 React Native 的 XMPP 连接(使用 xmpp.js)?

来自分类Dev

如何检测何时打开React Native应用程序?

来自分类Dev

如何从React前端应用程序打开新标签页

来自分类Dev

在 React Native 应用程序之上打开 webview

来自分类Dev

我在哪里可以从React Redux应用程序的服务器中获取初始数据?

来自分类Dev

在React.js / Redux应用程序中设置默认状态

来自分类Dev

将react-redux集成到现有的Angularjs应用程序中

来自分类Dev

使用Redux应用程序在React-native中访问状态的问题

来自分类Dev

将react-redux集成到现有的Angularjs应用程序中

来自分类Dev

我应该担心我的React Redux应用程序中的状态变化率吗?

Related 相关文章

  1. 1

    React Native深度链接应用程序未打开

  2. 2

    js承诺中未捕获的错误在React / Redux应用程序中

  3. 3

    CORS在React / Redux应用程序中执行API调用

  4. 4

    在React / Redux应用程序中隐藏API URL(代理)

  5. 5

    在react-redux-promise应用程序中解析XML

  6. 6

    来自React / Redux应用程序中组件的权限检查

  7. 7

    react-redux应用程序中的状态对象结构

  8. 8

    在react-redux-promise应用程序中解析XML

  9. 9

    react-redux 应用程序中的重复操作

  10. 10

    调试“react-redux”应用程序?

  11. 11

    我遇到了未捕获的不变违反:找不到react-redux上下文值;即使我的应用程序包装在提供程序中

  12. 12

    使用 Redux-Observable 在 React-Redux-Firebase 应用程序中实现自动保存

  13. 13

    在React Native中从模态打开模态

  14. 14

    从iOS中的另一个应用程序打开设置应用程序-React Native

  15. 15

    在托管应用程序中打开时,React js应用程序的CSS样式将被覆盖

  16. 16

    react-admin:如果要在非redux应用程序中嵌入react-admin,是否需要在应用程序中安装redux?

  17. 17

    在Web浏览器中打开到React-Native应用程序的Deeplink

  18. 18

    如何在React Native Android中打开应用程序设置页面?

  19. 19

    为什么vscode在边缘而不是Chrome中打开React应用程序?

  20. 20

    如何在整个应用程序中打开 React Native 的 XMPP 连接(使用 xmpp.js)?

  21. 21

    如何检测何时打开React Native应用程序?

  22. 22

    如何从React前端应用程序打开新标签页

  23. 23

    在 React Native 应用程序之上打开 webview

  24. 24

    我在哪里可以从React Redux应用程序的服务器中获取初始数据?

  25. 25

    在React.js / Redux应用程序中设置默认状态

  26. 26

    将react-redux集成到现有的Angularjs应用程序中

  27. 27

    使用Redux应用程序在React-native中访问状态的问题

  28. 28

    将react-redux集成到现有的Angularjs应用程序中

  29. 29

    我应该担心我的React Redux应用程序中的状态变化率吗?

热门标签

归档