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

您正在设置from toolz.itertoolz import sliding_window d=set() data = "124136" for i in list(sliding_window(2, data)): if 1<=int(i[0])<=26: d.add(i[0]) if 1<=int(i[1])<=26: d.add(i[1]) if 1<=int(i[0]+i[1])<=26: d.add(i[0]+i[1]) print(d) # {'1', '12', '13', '2', '24', '3', '4', '6'}状态，但是它被来自道具的open状态所覆盖。

您应该传递一个处理程序，例如showModal进入模态，并使用它来更改toggleModal道具，而不是模态内部的open。

这是一个例子。

state

CodeSandbox https://docs.spring.io/spring-boot/docs/current/reference/html/boot-features-profiles.html。

将状态传递给模态（子组件）不会更改子组件内部的状态

1 个答案: