需要从语义UI反应的Form.Input到<input>的引用-在React中被div包围

Question

我使用的是语义UI反应的Form.Input，它将输入分为两个div。

这意味着，

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

呈现如下：

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

我想获取该<input/>元素的引用，以便可以调用focus（）。

1. 使用ref ='myRef'时，我的参考设置为组件
2. ReactDOM.findDOMNode返回一个DOM引用，但是该引用设置为外部div（带有class ='field'）。

如何获得对该<input/>元素的引用？

顺便说一句，我正在使用redux，尽管我认为这并不重要

Answer 1

Form.Input只是包装包装的一些组件的简写Input。因此，在后台：

<Form.Input label='Enter Password' type='password' />

与此相同：

<Form.Field>
  <label>Enter Password</label>
  <Input type='password' />
</Form.Field>

semantic-ui-react 支持反应refAPI的Input，但要确保你使用的是当前的 ref API，而不是旧的：

<Input ref={ref => this.input = ref} />

运行示例：

<Form.Input label='Enter Password' type='password' />

<Form.Field>
  <label>Enter Password</label>
  <Input type='password' />
</Form.Field>

Answer 2

当您使用 findDOMnode （通常不建议）时，您将回到标准 js，因此：

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

应该管用