CODEWITHSUNDEEP
javascriptreactjsreact-bootstrap
Tom Hanson
Tom Hanson

Reputation: 663

React-Bootstrap Modal form entry

I currently have a React Bootstrap Modal that when opened, shows a number of Inputs. I want the user to be able to enter values in the Inputs, and then with a 'Save' button, simply to create a JSON object and console log the newly created JSON object.

closeModal(){
    this.setState({
      showModal: false,
    });
}

openModal(){
    this.setState({
      showModal: true,
    });
}

saveSandbox(event){
    console.log("Hello World");
    name: this.refs.bundleName.findDOMNode().value;
    console.log(name);
}
<Modal show={this.state.showModal} onHide={this.closeModal.bind(this)}>
    <form>
        <Modal.Header closeButton>
            <Modal.Title>Create New</Modal.Title>
            <Input type="text" ref="bundleName" placeholder="Name" />
        </Modal.Header>
        <Modal.Body >
            <h4>Type: </h4>

                <Input type="select" placeholder="select">
                    {bundleTypes.map(({type}, index) =>
                        <option value="select">{type}</option>
                    )}
                </Input>

                    <h4>Description: </h4>
                    <Input type="text" placeholder="Enter text"}/>
                    <hr />

        </Modal.Body>
        <Modal.Footer>
            <Button onClick={this.saveSandbox.bind(this)} bsStyle="success">Save</Button>
            <Button onClick={this.closeModal.bind(this)} >Close</Button>
        </Modal.Footer>
    </form>
</Modal>

This is my code currently, however when ran in Chrome, it reports that Uncaught TypeError: this.refs.bundleName.findDOMNode is not a function

When looking at examples or other questions/answers the suggestions are now deprecated.

Upvotes: 3

Views: 6385

Answers (1)

WitVault
WitVault

Reputation: 24130

With React v0.14 it is straight forward. Following code - this.refs.bundleName is the actual DOM node. You don't have to call this.refs.bundleName.getDOMNode() to get the underlying DOM node.

Upvotes: 2

Related Questions