Как сгенерировать кнопку в форме, которая будет закрывать Modal?

Question

[Ninja Mate]

Суть вопроса в том, что бы указать функцию onClick={} (побовал даже такое this.MySmallModal.this.props.onHide и многое другое) в одной из кнопок MyContactForm так, что бы работало аналогично функции кнопки <Button onClick={this.props.onHide}> в 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);

Comments

[IvanDix]

Что-бы спрятать форму модала нажатием кнопки из другого элемента, надо в этот элемент пробросить эту функцию из модала. И привязать к onClick. Функция this.hideModal(). pastebin.com/gFrSWDtV

Answer 1

[Ninja Mate]

<MyContactForm {...this.props} />
Вот и ответ, не забывайте пропры посылать при вызове.