react newforms, set input value and focus field

Question

So what i want to do is to reset the username field's value to '' and focus it (upon i get an error sent back form the server).

// get the form ref
var form = this.refs.loginForm.getForm();
// reset username field value (this actually gets updated if i check 
// it in the console but the UI won't re-render
form.updateData({username: ''}, {validate: false})
// focus the username input (ofc doesnt work at all)
form.fields.username.focus();

Answer 1

Does any of this have anything to do with React? Basically on page load check for some error that occurred, if that value is present than you would want to pass that value as a property to your react component to build your UI accordingly.

Sorry the question is kind of vague, there are a ton of ways you can handle it. Not really react specific since you said it comes back from the server I'm assuming the page reloads? or are you making an ajax call that is coming back to the server if that is the case, log the response as a variable in React's state and tell it what to do should that variable be present.

Answer 2

The focusing part depends on how you're rendering your form, as you need to access the real DOM node to do this. If you're rendering it manually, you can pass a ref when rendering this field:

form.boundField('username').render({attrs: {ref: 'username'}})

Then later you can do React.findDOMNode(this.refs.username).focus() when you need to focus the field.

If another React component is rendering the form for you, such as <RenderForm>, there's not currently a way to get at the actual DOM node it ends up rendering for each input. There's an open issue for this.

---

The data updating code should be working, as form.updateData() should be forcing the component containing the form to update. Can you provide a working example?