模态框不会在 react-redux 应用程序中打开

Question

我正在开发 React-Redux 应用程序，目前致力于在单击表单按钮时显示模式框。但我无法让它发挥作用。我已经尝试了很多东西，但无法弄清楚为什么没有出现模态框。这是我的代码。

Modal组件文件

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)

Modal中加载的表单

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)

调用modal的文件

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;

Answer 1

在我们项目的开始，我尝试开发我自己的具有所有自定义功能的模式。出现了很多问题。我搜索了一些开源项目，然后在 github 上找到了一个项目。你应该使用 react-modal，它易于使用且设计精良。

react-modal

Answer 2

我现在发现了一个愚蠢的错误。但是我应该得到一个我没有得到的错误。我必须将 'show' 传递给我现在完成的 const EditInformation，它工作正常。这是代码的一部分：

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

我之前没有通过 'show'。

模态框不会在 react-redux 应用程序中打开

Modal box doesn't open in react-redux app

bootstrap-modal

reactjs

redux

react-redux