ボタンを押して、に切り替え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);
どんなアドバイスもいただければ幸いです。
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はこちら。
この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。
侵害の場合は、連絡してください[email protected]
コメントを追加