Answer the question
In order to leave comments, you need to log in
How to generate a button on a form that will close the Modal?
The essence of the question is to specify the onClick={} function (I even tried this.MySmallModal.this.props.onHide and much more) in one of the MyContactForm buttons so that it would work similarly to the button function <Button onClick={this.props.onHide}>
in MySmallModal
var MySmallModal = React.createClass({
render() {
return (
<Modal {...this.props} bsSize="small" aria-labelledby="contained-modal-title-sm">
<Modal.Header closeButton>
<Modal.Title id="contained-modal-title-sm">Contact Form</Modal.Title>
</Modal.Header>
<Modal.Body>
<div><MyContactForm /></div>
</Modal.Body>
<Modal.Footer>
<b><Button onClick={this.props.onHide}>Close</Button></b>
</Modal.Footer>
</Modal>
);
}
});
var MyContactForm = React.createClass({
propTypes: {
value: React.PropTypes.object.isRequired
},
render: function() {
return (
<form>
<Input type="text" label="Name" placeholder="Your Name" bsSize="large" />
<Input type="email" label="Email" placeholder="Your Email" bsSize="large"/>
<Input type="textarea" label="Massage" placeholder="Please tell me more" bsSize="large"/>
<Input type="checkbox" label="Rules and Conditions" checked readOnly bsSize="large"/>
<ButtonGroup vertical block>
<Button type="reset" bsStyle="warning" bsSize="large">Reset</Button>
<Button type="submit" bsStyle="success" bsSize="large">Submit</Button>
<b> <Button onClick={this.MySmallModal.this.props.onHide}>Close</Button></b>
</ButtonGroup>
</form>
)
}
});
var App = React.createClass({
getInitialState() {
return { smShow: false};
},
showModal() {
this.setState({show: true});
},
hideModal() {
this.setState({show: false});
},
render() {
let smClose = () => this.setState({ smShow: false });
return (
<ButtonToolbar>
<Button bsStyle="primary" onClick={()=>this.setState({ smShow: true })}>
Contact Form
</Button>
<MySmallModal show={this.state.smShow} onHide={smClose} />
</ButtonToolbar>
);
}
});
ReactDOM.render(<App />, document.body);
Answer the question
In order to leave comments, you need to log in
<MyContactForm {...this.props} />
Here is the answer, do not forget to send propra when you call.
Didn't find what you were looking for?
Ask your questionAsk a Question
731 491 924 answers to any question