Versandaktion zum Schließen von Modal

Question

Ich habe Reduzierer, der eine modale Komponente verbirgt und anzeigt;

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

Aktion, die modal zeigt:

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

Wie kann ich eine Funktion meiner modalen Komponente senden, die eine Aktion Versand wird 'HIDE_MODAL':

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

I react-modal als Wrapper verwenden für Meine Modelle, die an der Oberseite der Komponenten montiert sind:

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

    } 
} 

Reagieren modal Wrapper:

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 

die modale zu schließen, muss ich modelIsOpen auf false, aswell als eine Aktion HIDE_MODAL Disposition?

Answer 1

Die actions sollten einfache Objekte sein; Sie mischen sie mit Funktionen.

Was Sie stattdessen tun sollten, ist nur die callback Funktionen übergeben, die Aktionen an die Komponente modal versenden.

Sie würden dies in der Smart Komponente tun. Siehe smart-and-dumb-components Artikel.

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

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

und macht dann die modal, so etwas wie:

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