javascript - react : Updated values is not coming in React-popup

Question

我正在研究 React-popup，但我遇到了一些问题。如果用户选择第三个选项，我设置条件，然后我将更新状态值。状态值已更新，当我在渲染中对其进行控制台时，它显示更新的值，但是当我想在 React-PopUp 中使用它时，更新的值不起作用。如果状态更新，我需要在弹出表单上重新渲染内容。我是新人请帮助我。注意:点击时将显示弹出表单

代码

import React, { Component } from 'react';
import { connect } from 'react-redux';
import { bindActionCreators } from 'redux';
import MyCalendar from 'react-big-calendar';
import CustomToolbar from './toolbar';
import Popup from 'react-popup';
import Input from './input';
import axios from 'axios'
import moment from 'moment';
import { fetchEvents, createEvent, updateEvent, deleteEvent } from '../../actions/calendar';


// Setup the localizer by providing the moment (or globalize) Object to the correct localizer.
const localizer = MyCalendar.momentLocalizer(moment); // or globalizeLocalizer


class Calendar extends Component {
    constructor(){
        super();
        this.state={
            isCustomer:false,
        }
    }

    onChangeHandler = ev => {
        this.setState(
            {isCustomer:ev.target.value === "viewing"},
            () => { console.log(this.state.isCustomer)
          })
      }
    componentDidMount() {
        this.props.fetchEvents();
    }

    //RENDER SINGLE EVENT POPUP CONTENT
    renderEventContent(slotInfo) {
        const date = moment(slotInfo.start).format('MMMM D, YYYY');
        return (
            <div>
                <p>Date: <strong>{date}</strong></p>
                <p>Subject: {slotInfo.taskChage}</p>
                <p>Time : {slotInfo.time}</p>
                <p>Date : { slotInfo.date}</p>
                <p>Notes : {slotInfo.notes}</p>
                <p>User Id : {slotInfo.userId}</p>
            </div>
        );
    }

    //ON SELECT EVENT HANDLER FUNCTION
    onSelectEventHandler = (slotInfo) => {
        console.log("New Applicaiton ", this.state.isCustomer)
        Popup.create({
            title: slotInfo.title,
            content: this.renderEventContent(slotInfo),
            buttons: {
                right: [{
                    text: 'Edit',
                    className: 'info',
                    action: function () {
                        Popup.close(); //CLOSE PREVIOUS POPUP
                        this.openPopupForm(slotInfo); //OPEN NEW EDIT POPUP
                    }.bind(this)
                }, {
                    text: 'Delete',
                    className: 'danger',
                    action: function () {
                        //CALL EVENT DELETE ACTION
                        this.props.deleteEvent(slotInfo.id);
                        Popup.close();
                    }.bind(this)
                }]
            }
        });
    }

    //HANDLE FUNCITON ON SELECT EVENT SLOT
    onSelectEventSlotHandler = (slotInfo) => {
        this.openPopupForm(slotInfo); //OPEN POPUP FOR CREATE/EDIT EVENT
    }


    //POPUP-FORM FUNCTION FOR CREATE AND EDIT EVENT
    openPopupForm = (slotInfo) => {

        let newEvent = false;
        let popupTitle = "Update Event";
        if(!slotInfo.hasOwnProperty('id')) {
            slotInfo.subject = null;
            slotInfo.taskType = null;
            slotInfo.time=null;
            slotInfo.date=null;
            slotInfo.notes=null;
            slotInfo.userId=null;
            popupTitle = "Add task to Diary";
            newEvent = true;
        }

        let titleChange = function (value) {
            slotInfo.subject = value;
        };
        let taskChange = function (value) {
            slotInfo.taskType = value;
        };

        let timeChange = function (value) {
            slotInfo.time = value;
        };

        let dateChnage = function ( value){
            slotInfo.date=value;
        };


        let notesChange = function ( value){
            slotInfo.notes=value;
        };

        let userId = function ( value){
            slotInfo.userId=value;
        };

        Popup.create({
            title: popupTitle,
            content: <div>
                    <Input fieldName="subject" onChange={titleChange} placeholder="Subject" />
                    <select name="taskType" onChange={this.onChangeHandler}>
                        <option vlaue="no">Task Type</option>
                        <option value="meeting">Meeting</option>
                        <option value="followup">Follow Up</option>
                        <option value="viewing">Viewing</option>
                        <option value="reminder">Reminder</option>
                        <option value="other">Other</option>
                    </select>
                    {this.state.isCustomer===true && <input defaultValue="Hi customer :)"></input>}
                    <Input fieldName="time" onChange={timeChange} placeholder="Time"/>
                    <Input fieldName="date" onChange={dateChnage} placeholder="Date"/>
                    <Input fieldName="notes" onChange={notesChange} placeholder="Notes"/>
                    <Input fieldName="userId" onChange={userId} placeholder="User Id"/>
                    </div>,
            buttons: {
                left: ['cancel'],
                right: [{
                    text: 'Save',
                    className: 'success',
                    action: function () {
                        //CHECK THE ID PROPERTY FOR CREATE/UPDATE
                        if(newEvent) {
                            this.props.createEvent(slotInfo); //EVENT CREATE ACTION
                        } else {
                            this.props.updateEvent(slotInfo); //EVENT UPDATE ACTION
                        }
                        Popup.close();
                    }.bind(this)
                }]
            }
        });
    }

    //EVENT STYLE GETTER FOR SLYLING AN EVENT ITEM
    eventStyleGetter(event, start, end, isSelected) {
        let current_time = moment().format('YYYY MM DD');
        let event_time = moment(event.start).format('YYYY MM DD');
        let background = (current_time>event_time) ? '#DE6987' : '#8CBD4C';
        return {
            style: {
                backgroundColor: background
            }
        };
    }

    render() {
        return (
            <div className="calendar-container">
                <MyCalendar
                    popup
                    selectable
                    localizer={localizer}
                    defaultView={MyCalendar.Views.MONTH}
                    components={{toolbar: CustomToolbar}}
                    views={['month']}
                    style={{height: 600}}
                    events={this.props.events}
                    eventPropGetter={(this.eventStyleGetter)}
                    onSelectEvent={(slotInfo) => this.onSelectEventHandler(slotInfo)}
                    onSelectSlot={(slotInfo) => this.onSelectEventSlotHandler(slotInfo)}
                />
                <Popup />

            </div>
        );
    }
}

function mapStateToProps(state) {
    return {
        events: state.events
    };
}

function mapDispatchToProps(dispatch) {
    return bindActionCreators({ 
        fetchEvents, 
        createEvent, 
        updateEvent, 
        deleteEvent
    }, dispatch);
}

export default connect(mapStateToProps, mapDispatchToProps)(Calendar);

Answer 1

尝试使用react inbuild方法componentDidUpdate()。当更新 DOM 且更新队列清空后需要执行操作时，componentDidUpdate 特别有用

import React, { Component } from "react";
import ReactDom from "react-dom";
import { Modal, Button, Row, Col, Form } from "react-bootstrap";

class PopupModal extends React.Component {
  popupShown = true;

  componentWillMount() {
  }

  componentDidUpdate() { //called when state update in parent component
     this.setState({ modalData: null });
     this.setState({ modalData: this.props.modalData});
     this.popupShown = true;
  }

  state = {
     modalData: this.props.modalData //getting data for the modal from parent
  };

  onHidePopup = () => {
      this.setState({ modalData: null });
      this.popupShown = false;
   };

   render() {
     if (this.popupShown == true) {
        return (
           <Modal
            show={this.popupShown}
            onHide={this.onHidePopup}
           >
         <Modal.Header closeButton>
         <Modal.Title id="modalTitle">Model header</Modal.Title>
        </Modal.Header>
      <Modal.Body>
        Model body comes here
      </Modal.Body>
      <Modal.Footer>
        <p>Hello I am Footer</p>
      </Modal.Footer>
    </Modal>
    );
   } else {
      return <div />;
   }
  }
 }
 export default PopupModal;