Example of using refs

[Ismael]

Would you please give me an example on how to use refs to refer to the form's fields?

In my component's refs only the form appears. Through the form, I can't find any ref either.

[marr]

You wouldn't even have to use refs. For example: If component had a state with a Form instance, like so:

getInitialState: function() {
    return { form: new MyForm({ labelSuffix: '' }); }
}

And it returned itself like: <RenderForm form={this.state.form} />

You could access the fields like so:

var component = TestUtils.renderIntoDocument(<X />);
component.state.form; // Full newforms api, including fields object

[marr]

you'd want to wrap component X in a regular react form, however.

[Ismael]

I'm sorry, I should have mentioned what I'm trying to achieve. I want to control the focus on the form. I looked at the newforms API and I don't believe I can do this directly. I need the DOMNode to do focus().

[marr]

In the earlier bug you filed Johnny said you should use the autoFocus property. https://github.com/insin/newforms/issues/63

Did you try that? What does the definition of your field look like. I'm using autoFocus here: https://gist.github.com/anonymous/811ebb26ac7642bee0c0#file-newcreditcard-js-L10

On Thu, Apr 2, 2015 at 3:52 PM, Ismael [email protected] wrote:

I'm sorry, I should have mentioned what I'm trying to achieve. I want to control the focus on the form. I looked at the newforms API and I don't believe I can do this directly. I need the DOMNode to do focus().

— Reply to this email directly or view it on GitHub https://github.com/insin/newforms/issues/78#issuecomment-89068397.

[Ismael]

Autofocus does work for the initial setting of focus, but I want to transfer focus after the user hits a particular key.

[marr]

I guess you'd use the ref widgetAttr then and call focus() that way.

On Thu, Apr 2, 2015 at 4:16 PM, Ismael [email protected] wrote:

Autofocus does work for the initial setting of focus, but I want to transfer focus after the user hits a particular key.

— Reply to this email directly or view it on GitHub https://github.com/insin/newforms/issues/78#issuecomment-89075078.

[Ismael]

Yes, I added ref to widgetAttrs, but I can't find the ref from the component. This.refs doesn't contain that ref On Apr 2, 2015 8:53 PM, "David Marr" [email protected] wrote:

I guess you'd use the ref widgetAttr then and call focus() that way.

On Thu, Apr 2, 2015 at 4:16 PM, Ismael [email protected] wrote:

Autofocus does work for the initial setting of focus, but I want to transfer focus after the user hits a particular key.

— Reply to this email directly or view it on GitHub https://github.com/insin/newforms/issues/78#issuecomment-89075078.

— Reply to this email directly or view it on GitHub https://github.com/insin/newforms/issues/78#issuecomment-89083951.

[insin]

This is another problem with moving more UI-specific concerns up into Form/Field definitions, starting to wonder if widgetAttrs was such a good idea...

React 0.13 allows you to pass a callback for a ref, which could be part of the solution here.

Being able to pass something like a fieldRef callback to a Form instance and the library passing that all the way down to rendered form inputs would let you manage refs yourself in whichever component needs them.

[insin]

This is pretty doable - the question is what do you want to get back if you pass a fieldRef callback when creating a Form instance or rendering a RenderForm with a fieldRef callback prop?

Variables available to pass when the callback is called:

• ref the React reference for the rendered form input
• name: the name of the field in the form
• htmlName: the name used for the rendered field (will be prefixed if the form is using prefixes)
• form: the form instance the field belongs to (can be used to un-prefix htmlName if necessary)

Edit: I'm thinking (ref, name, form) for a possible callback signature, as you only need to declare the form parameter if you;re using the same handler across multiple forms and need to disambiguate the ref using the form's prefix.

[Ismael]

Ref, name and form sounds good. How would that work when there are multiple refs? List of {ref,name,form} ?

Having the callback on creating the instance or the RenderForm seems very useful (if you had to declare on the forms.Form.extend would make sharing code almost impossible).

[insin]

React would fire the callback for each rendered widget, leaving it up to you to handle what you do with each ref. Basic example I'm playing with:

This would likely need some special treatment at the Widget level for widgets which render multiple inputs with the same set of attributes.