I am new to React and I want to use React-Bootstrap Modal. This code works very well but what I want to do is instead of having a button inside Trigger component, I want it in another parent component so I can call Trigger component from a button in a parent component.
let Button = ReactBootstrap.Button;
let Modal = ReactBootstrap.Modal;
class Trigger extends React.Component{
constructor(props){
super(props);
this.state = { show: false };
}
render(){
let close = () => this.setState({ show: false});
return (
<div className="modal-container" style={{height: 1000}}>
<Button
bsStyle="primary"
bsSize="large"
onClick={() => this.setState({ show: true})}
>
Launch contained modal
</Button>
<Modal
show={this.state.show}
onHide={close}
container={this}
aria-labelledby="contained-modal-title"
>
<Modal.Header closeButton>
<Modal.Title id="contained-modal-title">Edit Recipe</Modal.Title>
</Modal.Header>
<Modal.Body>
<form className="form-group">
<label>Recipe</label>
<input type='text' className="form-control"/>
<label>Ingredients</label>
<textarea type='text' className="form-control"/>
</form>
</Modal.Body>
<Modal.Footer>
<Button bsStyle="primary">Edit Recipe</Button>
<Button onClick={close}>Close</Button>
</Modal.Footer>
</Modal>
</div>
);
}
}
On observing your code, one can find that the Modal get's launched onClick of the Button
. The corresponding state change in the component is it's state's show property.
I have made the following jsFiddle to show how you can control the modal externally.
https://jsfiddle.net/sunnykgupta/5qrzt9uy/
In a gist, we accept a prop
into the component and listen to prop
changes (via. componentWillReceiveProps()
). Internally, we maintain a state
to track modal show status.
Code:
let Button = ReactBootstrap.Button;
let Modal = ReactBootstrap.Modal;
class Trigger extends React.Component{
constructor(props){
super(props);
this.state = { show: props.modal };
}
componentWillReceiveProps(nextProps){
if(this.state.show!==nextProps.modal){
this.setState({show: nextProps.modal})
}
}
render(){
let close = () => this.setState({ show: false});
return (
<div className="modal-container">
<Modal
show={this.state.show}
onHide={close}
container={this}
aria-labelledby="contained-modal-title"
>
<Modal.Header closeButton>
<Modal.Title id="contained-modal-title">Edit Recipe</Modal.Title>
</Modal.Header>
<Modal.Body>
<form className="form-group">
<label>Recipe</label>
<input type='text' className="form-control"/>
<label>Ingredients</label>
<textarea type='text' className="form-control"/>
</form>
</Modal.Body>
<Modal.Footer>
<Button bsStyle="primary">Edit Recipe</Button>
<Button onClick={close}>Close</Button>
</Modal.Footer>
</Modal>
</div>
);
}
}
class Parent extends React.Component{
constructor(props){
super(props);
this.state = {show: false}
}
render(){
return <main>
<Trigger modal={this.state.show}/>
<Button
bsStyle="primary"
bsSize="large"
onClick={() => this.setState({ show: true})}
>
Launch contained modal
</Button>
</main>
}
}
ReactDOM.render(
<Parent/>,
document.getElementById('container')
);
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.