How to get an input value using “refs” in react-bootstrap form?

Question

I\'m trying to create a form that appears in modal. So when user input a value, that value is stored in local storage. Here\'s a picture that help\'s you to understand what I me

Answer 1

This issue (or more like a change in the way it works) is related to React-Bootstrap. The way you're doing it won't work anymore.

The component directly renders the or other specified component. If you need to access the value of an uncontrolled , attach a ref to it as you would with an uncontrolled input, then call ReactDOM.findDOMNode(ref) to get the DOM node. You can then interact with that node as you would with any other uncontrolled input.

Here's an example:

var React = require('react');
var ReactDOM = require('react-dom');
var FormControl = require('react-bootstrap').FormControl;

React.createClass({
  render: function() {
    return ();
  },
  getFormControlNode: function() {
    // Get the underlying  DOM element
    return ReactDOM.findDOMNode(this.refs.formControl);
  }
});

As soon as you get the DOM element, you will be able to retrieve the value: this.getFormControlNode().value or do anything else that you want.

PS: Here's a related github issue on this topic.