需要参考语义-ui-react的Form.Input - 它被React中的div包围

Question

我正在使用semantic-ui-react的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/>元素的ref，以便我可以调用focus（）。

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

如何获得<input/>元素的参考？

顺便说一句，我使用的是redux，虽然我觉得不重要

Answer 1

当你使用findDOMnode（通常不建议）时，你会回到标准的js中，所以这个：

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

应该管用

Answer 2

Form.Input只是包裹shorthand的一些组件的Input。在幕后这个：

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

与此相同：

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

semantic-ui-react supports the react ref API为Input，但请确保您使用的是current ref API而不是the old one：

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

运行示例：

const { Input, Button } = semanticUIReact; // import

class App extends React.Component {
  onClick = () => this.input.focus();
  render() {
    return (
      <div>
        <Input ref={ref => this.input = ref} />
        <Button onClick={this.onClick}>Focus</Button>
      </div>
    );
  }
}
ReactDOM.render(<App />, document.getElementById('root'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/semantic-ui-react.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.9/semantic.min.css"/>
	<div id="root"></div>