Question

我有减速器，它隐藏并显示模态组件;

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'：

  openAchievementModal(){
        this.props.showAchievement({
           type: 'SHOW_MODAL',
          modalType: 'ADD_ACHIEVEMENT',
          modalProps: {
          dayId: this.props.day.id,
          onChange: this.props.addAchievement
        }
    })
  }

我使用react-modal作为我的模态的包装器，它安装在组件的顶部：

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>
    )

    }
}

React模态包装器：

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

要关闭模式，我是否需要modelIsOpen为false，以及发送操作HIDE_MODAL？

Answer 1

actions应该是普通对象;你将它们与功能混合在一起。

您应该做的只是将callback调度操作的函数传递给modal组件。

您可以在智能组件中执行此操作。请参阅smart-and-dumb-components文章。

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

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

然后渲染模态，如：

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

派遣行动关闭模态

1 个答案: