親コンポーネントボタンからreactstrapモーダルを開閉しようとしていますが、機能しません。
状態isModalOpen
を子ModalExample
コンポーネントに小道具として渡しています。作成したデバッグテキストフィールドに示されているように変化しますが、モーダルが開いていないようです。
どんな助けでも大歓迎です。これがjsfiddleです: https://jsfiddle.net/67wy5nqp/
const { Button, Modal, ModalHeader, ModalBody, ModalFooter } = Reactstrap;
class ModalExample extends React.Component {
constructor(props) {
super(props);
console.log(this.props);
}
render() {
return (
<div>
<br />
<label>
(child) this.props.isOpen
<input type="text" value={this.props.isOpen} />
</label>
<Modal
isOpen={this.props.isModalOpen}
toggle={this.props.toggleModalView}
className={this.props.className}
>
<ModalHeader toggle={this.props.toggleModalView}>
Modal title
</ModalHeader>
<ModalBody>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim
ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
aliquip ex ea commodo consequat. Duis aute irure dolor in
reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
culpa qui officia deserunt mollit anim id est laborum.
</ModalBody>
<ModalFooter>
<Button color="primary" onClick={this.props.toggleModalView}>
Do Something
</Button>
<Button color="secondary" onClick={this.props.toggleModalView}>
Cancel
</Button>
</ModalFooter>
</Modal>
</div>
);
}
}
class SampleApp extends React.Component {
constructor(props) {
super(props);
this.state = {
isModalOpen: true
};
this.showModal = this.showModal.bind(this);
this.toggle = this.toggle.bind(this);
}
toggle() {
this.setState({
isModalOpen: !this.state.isModalOpen
});
}
showModal() {
this.setState({
isModalOpen: true
});
}
render() {
return (
<div>
<ModalExample
isOpen={this.state.isModalOpen}
toggle={this.state.isModalOpen}
/>
<br />
<button className="btn btn-primary" onClick={this.toggle}>
Show Modal From Parent Component
</button>
<br />
<label>
(parent) this.state.isModalOpen:
<input type="text" value={this.state.isModalOpen} />
</label>
</div>
);
}
}
ReactDOM.render(<SampleApp />, document.querySelector("#app"));
状態変数isModalOpen
を、開いているかどうかを示す変数と、それを切り替えるために使用する関数の両方として渡します。代わりに、this.toggle
を使用して切り替えます。
<ModalExample
isOpen={this.state.isModalOpen}
toggle={this.toggle}
/>
toggleModalView
コンポーネントでModalExample
小道具も使用していますが、関数をtoggle
として渡しているため、代わりにthis.props.toggle
を使用する必要があります。また、isModalOpen
をisOpen
として渡すため、代わりにthis.props.isOpen
を使用する必要があります。
import React from 'react';
import { Button, Modal, ModalFooter, ModalHeader,ModalBody} from 'reactstrap';
class ModalExample extends React.Component {
constructor(props) {
super(props);
this.state = {
modal: props.initialModalState,
fade: true
};
this.toggle = this.toggle.bind(this);
}
toggle() {
this.setState({
modal: !this.state.modal,
fade: !this.state.fade
});
}
render() {
return (
<div>
<Button color="danger" onClick={this.toggle}>TOGGLE</Button>
<Modal isOpen={this.state.modal} toggle={this.toggle}
fade={this.state.fade}
className={this.props.className}>
<ModalHeader toggle={this.toggle}>Modal title</ModalHeader>
<ModalBody>
</ModalBody>
<ModalFooter>
<Button color="primary" onClick={this.toggle}>Do Something</Button>{' '}
<Button color="secondary" onClick={this.toggle}>Cancel</Button>
</ModalFooter>
</Modal>
</div>
);
}
}
export default class SampleApp extends React.Component {
constructor(props) {
super(props);
this.state = {}
}
render() {
return (
<div>
<ModalExample initialModalState={false} />
</div>
)
}
}
**This example getting call component modal from another component**