如何将焦点设置到 antd Input.Password 组件？答案

【问题标题】：How to set focus to an antd Input.Password component?如何将焦点设置到 antd Input.Password 组件？
【发布时间】：2019-10-20 13:50:56
【问题描述】：

我正在尝试将焦点设置为 input.password 字段。有可能吗？

我没有看到任何关于 antd 文档的信息。不知道有没有可能

Input(Input.TextArea) 通过 ref 具有 Input(textAreaRef) 属性。但在Input.Password 中，我找不到任何关于此的信息。有没有办法完成我的问题？

【问题讨论】：

您好，没有代码显示您尝试过的内容，无法提供任何具体建议。
对不起，请稍等，我会发布一个codeandbox链接。
code example

标签： reactjs antd

【解决方案1】：

有时你用 ref 指向 Component 而不是 DOM 元素，所以，试试这个：

如果是来自 antd 库的 Input 组件：

import React, { useRef, useEffect } from "react";
import { Input, Form } from "antd";
import "antd/dist/antd.css";

const MyComponent = () => {
  // Same as React.createRef()
  const passwordInput = useRef(null);

  useEffect(() => {
    if (passwordInput.current) {
      // or, if Input component in your ref, then use input property like:
      // passwordInput.current.input.focus();
      passwordInput.current.focus();
    }
  }, [passwordInput]);

  return (
    <Form>
      <Form.Item name="login">
        <Input type="text" placeholder="Login" />
      </Form.Item>
      <Form.Item name="password">
        <Input type="password" placeholder="Password" ref={passwordInput} />
      </Form.Item>
    </Form>
  );
};

export default MyComponent;

如果是 DOM 元素

import React, { useRef, useEffect } from "react";

const MyComponent2 = () => {
  const passwordInput = useRef(null);

  useEffect(() => {
    if (passwordInput.current) {
      passwordInput.current.focus();
    }
  }, [passwordInput]);

  return (
    <form>
      <input type="text" placeholder="Login" />
      <input type="password" placeholder="Password" ref={passwordInput} />
    </form>
  );
};

export default MyComponent2;

这是codesandbox上的示例

附： useEffect hook 与 Class 组件中的 componentDidMount 几乎相同

【讨论】：

【解决方案2】：

您也可以为 Input.password 使用 refs。

import React, { Component } from 'react'

export default class container extends Component {
  constructor(props) {
    super(props);

    this.password = React.createRef();
  }

  componentDidMount() {
    this.password.current.focus();
  }

  render() {
    return (
      <div>
        <input type="password" ref={this.password}/>
      </div>
    )
  }
}

Refs 提供了一种访问 DOM 节点或在 render 方法中创建的 React 元素的方法。

【讨论】：

【解决方案3】：

密码输入与其他文本输入没有什么不同。首先您必须创建对输入的引用，然后您可以随时调用其focus() 方法来聚焦输入。下面的代码关注的是组件挂载时的输入：

import React from "react";
import ReactDOM from "react-dom";
import { Icon, Input } from "antd";
import "antd/dist/antd.css";
import "./index.css";

class LoginForm extends React.Component {
  passwordInput = null;

  componentDidMount() {
    this.passwordInput.focus();
  }

  render() {
    return (
      <div className="App">
        <Input
          prefix={<Icon type="lock" style={{ color: "rgba(0,0,0,.25)" }} />}
          type="password"
          placeholder="Password"
          ref={input => {
            this.passwordInput = input;
          }}
        />
      </div>
    );
  }
}

ReactDOM.render(<LoginForm />, document.getElementById("root"));

Try it here

【讨论】：

感谢您的回复，使用Input的type attr是没有问题的。但我使用而不是。 form.输入密码类型，3.12.0新增。
我发一个例子到codesandbox，你可以找到here
<Input.Password /> 和 <Input type='password' /> 之间有什么主要区别吗？