Reactjs 发送关闭模式的操作

我有一个减速器，它隐藏和显示一个模态组件

import {SHOW_MODAL, HIDE_MODAL } from '../constants/ActionTypes'


import React from 'react';
import {connect} from 'react-redux';

import * as actions from '../actions';

const initialState = {
  modalType: null,
  modalProps: {}
}

export default function modal(state = initialState, action) {
  switch (action.type) {
    case 'SHOW_MODAL':
      return {
        modalType: action.modalType,
        modalProps: action.modalProps
      }
    case 'HIDE_MODAL':
      return initialState
    default:
      return state
  }
}

显示模态的操作：

export const showAchievement = (modalProps) => ({ type: types.SHOW_ACHIEVEMENT, ...modalProps })

我如何向模态组件发送一个函数，该函数将调度一个动作“HIDE_modal”：

我使用react模态作为安装在组件顶部的模态的包装：

import React, { Component } from 'react';
import Modal from 'react-modal';
import ModalWrapper from './ModalWrapper.js';

import Select from 'react-select';

export default class AddAchievementModal extends Component {

   constructor() {
       super();
         this.logChange = this.logChange.bind(this);
  }

  logChange(e) {

        this.props.onChange(this.props.dayId, e.label)
        this.props.onClose()
  }

  render() {

    console.log(this.props)
    var options = [
      { value: 1, label: 'Play Music' },
      { value: 2, label: 'Football' }
    ];

    return (
         <span >
          <ModalWrapper
            onRequestClose={this.props.closeModal}
            style={this.props.customStyles}
            contentLabel="Modal" >

          <h2>Add Achievement</h2>

          <Select
            name="form-field-name"
            value="one"
            options={options}
            onChange={this.logChange}
          />
          </ModalWrapper>
      </span>
    )

    }
}

反应模态包装器：

import Modal from 'react-modal'
import React, { Component } from 'react'

const customStyles = {
  content : {
    top                   : '50%',
    left                  : '50%',
    right                 : '50%',
    bottom                : '30%',
    marginRight           : '-50%',
    transform             : 'translate(-50%, -50%)',
    borderRadius          : '10px',
    border                : '3px solid #ccc'
  },
};

class ModalWrapper extends Component {
  constructor() {
    super();

    this.state = {
      modalIsOpen: true
    };

    this.closeModal = this.closeModal.bind(this);
  }

  closeModal() {
    this.setState({modalIsOpen: false});
  }


   render() {
    return (
          <Modal style={customStyles}  isOpen={this.state.modalIsOpen} contentLabel="Model Wrapper" closeModal={this.props.closeModal}>
                <header>
                <button onClick={this.closeModal}>Close</button>
                 </header>

                {this.props.children}

           </Modal>
          );
  }
}

export default ModalWrapper

要关闭模式，我是否需要将modelispen设置为false，以及分派一个动作HIDE_modal？

动作应该是普通对象；您正在将它们与函数混合

您应该做的是只传递回调函数，这些回调函数将动作分派给模态组件

您可以在智能组件中执行此操作。见文章

然后渲染模态，类似于：

<Modal onOpen={this.onOpenAchievementModal} onClickAchievement={this.onAddAchievementModal}/>

---

谢谢，我需要模态减速器和react模态包装器吗？问题是：您需要/想要跟踪redux商店中的模态状态吗？如果没有，您可以在这里去掉redux并使用组件状态。

onOpenAchievementModal() {
  this.props.showAchievement({
    ...
  })
}

onAddAchievementModal(achievement) {
  this.props.addAchievement({
    ...
    achievement,
  })
}

<Modal onOpen={this.onOpenAchievementModal} onClickAchievement={this.onAddAchievementModal}/>