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/>元素的引用，以便我可以调用focus（）。

使用ref ='myRef'
ReactDOM.findDOMNode返回一个DOM引用，但是ref被设置为外部div（使用class ='field'）。

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

Answer 1

对于包裹Form.Input的某些组件，

Input只是shorthand。所以在幕后这个：

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

与此相同：

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

semantic-ui-react的{p> Input supports the react ref API，但要确保您使用的是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/semantic-ui-react@0.78.3/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>

Answer 2

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

public class MinimalMigrationLogger : MigrationsLogger
{
    public override void Info(string message)
    {
        // Ignore it; there's too much of it clogging up CI
    }

    public override void Verbose(string message)
    {
        // The SQL text and other info comes here
        // Ignore it; there's too much of it clogging up CI
    }

    public override void Warning(string message)
    {
        Console.WriteLine(message);
    }
}

应该有效

需要从semantic-ui-react的Form.Input引用<input /> - 它被React中的div包围

2 个答案: