Improve Documentation for Forms

[PolGuixe]

I can't see in the Docs a good alternative to:

const {input1, input2} = this.refs;
submitMethod(input1.getValue(), input2.getValue());

How can a value be obtained from the <FormControl/> component?

[jquense]

you can just use findDOMNode on the component to get the underlying input

[nmn]

The switch from the old Input to Form Controls has many downsides. This being just one more.

[taion]

getValue was a broken API in that it wasn't compatible with any sort of HoCs like from Redux. That you can now use getDOMNode to get the DOM node from the <FormControl> no matter how you wrap it was one of the explicit goals here.

[vinnymac]

I understand that we can now use getDOMNode and ReactDOM.findDOMNode to get the node from the FormControl. In fact I think this is better for everyone, and seems to follow a more react friendly way of obtaining the node. However the name of this issue is Improve Documentation for Forms, which I don't believe has been taken care of.

I only knew to make this change in my projects because I found these issues. I think it would be better to leave this open until documentation for explaining this is added, unless of course we expect people to just assume this is what they need to do from now on.

[jquense]

PRs Welcome! we'll happily take a doc improveent

[chalda]

I still dont see any end-to-end examples of how to work with values in FormGroups. You mention using findDOMNode but I don't quit understand how to do this easily.

this jsfiddle is probably the most example code I found on the net and it works with inputs directly:
http://jsfiddle.net/mnhm5j3g/1/

I think I might just have to rewrite everything with plain .

[jquense]

@chalda there is nothing special to be done about managing values, the FormControl's are just wrappers around the plain inputs, so you do the same things to manage values as you would plain inputs

[Industrial]

Hi!

first of all thanks to everyone who contributed to this project. It's an enormous help for people trying to bust out apps world wide I think.

I'm now converting an old codebase to a new version of this, and I'm changing all the <Input>'s into <FormControl>'s.

I've never worked with findDOMNode before but the documentation had a big fat WARNING saying it's not a good idea to be using it. I tried to but I'm not sure I understand the API. It seems to be taking a Component, would that be the this inside a component definition/class?

It would be highly beneficial for me for the documentation to include small code examples how "how to get stuff done", and in my experience leaving things implied will always get some reader/user in trouble down the line :-)

[PolGuixe]

I am having problem while performing unit tests with enzyme. How would you accesss the input.value field?

[nadeemja]

Could a kind soul please provide a working code example?
Thanks.

[taion]

There are multiple working examples on the components page.

[vinnymac]

For those saying that they don't know what findDOMNode is or are afraid of using it because of the warnings, read over the React documentation more thoroughly. It explicitly states

This method is useful for reading values out of the DOM, such as form field values

findDOMNode is meant to be used in this case. An example should not be necessary, as this is just simply reacts API. A note exists for those who may be migrating from an older to a newer version of this library. That is all that should be necessary, but if you are still struggling with this perhaps the example below will help you.

Example Usage

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

React.createClass({
  render: function() {
    return (<FormControl ref = 'formControl'/>);
  },
  getFormControlNode: function() {
    return ReactDOM.findDOMNode(this.refs.formControl);
  }
});

[nadeemja]

@taion

Apologies, I was unclear. The code example I would greatly appreciate, is one which demonstrates the alternative to this.refs and .getValue().

Thanks :)

[jquense]

@nadeemja you use refs and findDOMNode(this.refs.input).value

[taion]

Clarifying the docs a bit more in #2077.

[justin808]

Is there any way that we can do this with the callback syntax: https://facebook.github.io/react/docs/refs-and-the-dom.html#the-ref-callback-attribute

I get the below errors with the latest eslint.

  114:15  error  Do not use findDOMNode                                 react/no-find-dom-node
  136:17  error  Using string literals in ref attributes is deprecated  react/no-string-refs

[dozoisch]

@justin808 You can use the same callback syntax as you would with a normal input. The wrappers are meant to be lightweight! So you can just put an onChange callback on it.

[localjo]

I'm a bit unclear on how to get the value of a <FormControl> without using findDOMNode since that is now being warned against.

My component with the ref looks like this;

<FormControl ref={node => this.productFilter = node} type="text" placeholder="Type here to filter products" defaultValue={this.props.data.filterValue} />

And I want to use the value of the input here;

updateFilter(e) {
    e.preventDefault();
    this.props.updateFilter(this.productFilter.value); // this.productFilter.value is undefined
  }

I don't see anything in the this.productFilter object that I can use to find the current value of the input in the browser. @dozoisch I'm not sure what you're referring to with the onChange callback.

It looks like we need a way to pass a callback ref into the ref attribute of the actual input element, but I'm not sure if that exists or not.

[jquense]

Folks, there is now a ton of documentation and pass issues where getting and setting the values of form inputs is covered extensively. Follow up comments on this and other related issues only serve to ping a bunch of people unnecessarily.

Our stance on on this API has been clear from the start here. The correct way to get values from inputs, is to use controlled inputs. For those don't want to/can't use idiomatic React patterns, we we aren't inventing an interface to native DOM elements when React already provides two. I still have no problem recommending using findDOMNode regardless of what the 3rd party eslint plugin rules say about it, (no-set-state is also a rule but no one would suggest using setState is an "anti pattern"). If you really don't want to use findDOMNode, the inputRef prop was added just for you.