N
N
Ninja Mate2016-01-21 13:19:48
React
Ninja Mate, 2016-01-21 13:19:48

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

1 answer(s)
N
Ninja Mate, 2016-01-21
@victorzadorozhnyy

<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 question

Ask a Question

731 491 924 answers to any question