Search code examples
javascriptreactjssemantic-ui-react

Need ref to <input> from semantic-ui-react's Form.Input - which is surrounded by divs in React

I am using semantic-ui-react's Form.Input, which wraps the input in two divs.

This means, 

<Form.Input type='password' name='password' id='loginPassword'></Form.Input>

is rendered as follows:

<div class='field'>
  <div class='ui fluid action left icon input'>
   <input type='password' name='password' id='loginPassword' ...>
   <button ...>
  </div>
</div>

I would like to get the ref for the <input/> element, so that I can call focus().

  1. My ref is set to the component when using ref='myRef'
  2. ReactDOM.findDOMNode returns a DOM ref, but the ref is set to the outer div (with class='field').

How do I get a ref to the <input/> element?

BTW, I am using redux, although I don't think that matters

Solution

  • As you're using findDOMnode (usually not advised), you're back into standard js, so this :

    ReactDOM.findDOMNode(your ref).querySelector('input')

    should work