Передача состояния в модальный (дочерний компонент) не меняет состояние внутри дочернего

Question

Нажатием кнопки и переключением showModal на true я отправляю props модальному компоненту AddEventModal.Внутри AddEventModal конструктора компонента я назначаю новое состояние open.После этого у меня все будет готово.Но по какой-то причине мое open состояние в AddEventModal остается false.Вот код:

import React, { Component } from 'react';
import Header from '../components/Header';
import Hour from '../components/Hour';
import Tile from '../components/Tile';
import CalEvent from '../components/CalEvent';
import AddButton from '../components/AddButton';
import AddEventModal from './AddEventModal';
import '../styles/calendar-grid.css';


class CalendarGrid extends Component {
  constructor(){
    super();
    this.state = {
      showModal: false
    }

    this.addEvent = this.addEvent.bind(this);
    this.handleOpenModal = this.handleOpenModal.bind(this);
  }

  handleOpenModal() {
    this.setState({ showModal: true });
  }

  handleCloseModal() {
    this.setState({ showModal: false });
  }

  render(){
    console.log(this.state.showModal);
    const gridTiles = [];


    return(
      <div className="calendar-grid"> 
        <AddButton showModal={this.handleOpenModal} />
        <AddEventModal  addEvent={this.addEvent} showModal={this.state.showModal}/>
      </div>
    )
  }
}

export default CalendarGrid;

Я получаю все props внутри AddEventModal, но я не буду менять состояние open.

import React from 'react';
import PropTypes from 'prop-types';
import { withStyles } from '@material-ui/core/styles';
import Typography from '@material-ui/core/Typography';
import Modal from '@material-ui/core/Modal';
import Button from '@material-ui/core/Button';
import Icon from '@material-ui/core/Icon';
import Close from '@material-ui/icons/Close';
import TextField from '@material-ui/core/TextField';
import DateRange from '@material-ui/icons/DateRange';
import Select from '@material-ui/core/Select';
import FormControl from '@material-ui/core/FormControl';
import MenuItem from '@material-ui/core/MenuItem';
import InputLabel from '@material-ui/core/InputLabel';


const styles = theme => ({

});

class AddEventModal extends React.Component {
  constructor(props){
    super(props);
    this.state = {
      open: this.props.showModal,
      name: '',
      date: new Date(),
      time: ''
    };

  }


  handleClose = () => {
   this.setState({ open: false });
  };

  handleChange = name => event => {
    this.setState({
      [name]: event.target.value,
    });
  }

  render() {
    const { classes, showModal } = this.props;

    console.log(`AddEventModal: ${this.props.showModal}`);
    console.log(`AddEventModal: ${this.state.open}`);

    return (
      <div>

        <Modal
          aria-labelledby="simple-modal-title"
          aria-describedby="simple-modal-description"
          open={this.state.open}
          onClose={this.handleClose}
        >
          <div style={getModalStyle()} className={classes.paper}>
            <Close className={classes.closeIcon} onClick={this.handleClose} />
            <Typography variant="h6" id="modal-title">
              Create a New Event
            </Typography>
            <Typography variant="subtitle1" id="simple-modal-description">
              <form className={classes.container} noValidate autoComplete="off">
                <TextField
                   id="standard-name"
                   label="Event"
                   className={classes.textField}
                   value={this.state.name}
                   onChange={this.handleChange('name')}
                   margin="normal"
                />
                <div className={classes.dateAndTime}>
                  <TextField
                    id="date"
                    label="Date"
                    type="date"
                    defaultValue={this.state.date}
                    className={classes.textFieldDate}
                    InputLabelProps={{
                      shrink: true,
                    }}
                  />
                  <FormControl className={classes.formControl}>
                    <InputLabel htmlFor="time-simple">Time</InputLabel>
                      <Select
                      value={this.state.time}
                      onChange={this.handleChange('time')}
                      inputProps={{
                        name: 'time',
                        id: 'time-simple',
                      }}
                      >
                        {this.timeRange()}
                      </Select>
                  </FormControl>
                </div>
                <Button variant="outlined" className={classes.saveButton} onClick={this.handleClose}>Save</Button>
              </form>
            </Typography>
          </div>
        </Modal>
      </div>
    );
  }
}

AddEventModal.propTypes = {
  classes: PropTypes.object.isRequired,
};

export default withStyles(styles)(AddEventModal);

Любой совет будет оценен.

Answer 1

Вы устанавливаете состояние open, но оно перезаписывается состоянием showModal, поступающим из реквизита.

Вы должны передать обработчик, например, toggleModal в модал, и использовать его для изменения пропеллы open, а не state внутри модала.

Вот пример.

import React from "react";
import ReactDOM from "react-dom";

const Modal = ({ open, toggle }) => {
  if (open) {
    return (
      <React.Fragment>
        <h1>Modal</h1>
        <button onClick={toggle}>Close</button>
      </React.Fragment>
    );
  }

  return null;
};

class App extends React.Component {
  state = {
    open: false
  };

  toggle = () => {
    this.setState({ open: !this.state.open });
  };

  render() {
    return (
      <React.Fragment>
        <button onClick={this.toggle}>Open</button>
        <Modal open={this.state.open} toggle={this.toggle} />
      </React.Fragment>
    );
  }
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

CodeSandbox здесь .