Reactjs 如何将焦点设置为antd Input.Password组件？

我正在尝试设置一个

输入.密码
字段。可能吗

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

Input（Input.TextArea）
通过ref有一个
Input（textAreaRef）
属性。但是在
Input.Password
中，我找不到有关此的任何信息。有什么方法可以完成我的问题吗？
您也可以使用refs作为Input.password

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>
    )
  }
}

import React，{Component}来自“React”
导出默认类容器扩展组件{
建造师（道具）{
超级（道具）；
this.password=React.createRef（）；
}
componentDidMount（）{
this.password.current.focus（）；
}
render（）{
返回(
)
}
}

REF提供了一种访问DOM节点或响应在render方法中创建的元素的方法。
密码输入与其他文本输入没有区别。首先必须创建对输入的引用，然后可以在任意点调用其
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"));

从“React”导入React；
从“react dom”导入react dom；
从“antd”导入{图标，输入}；
导入“antd/dist/antd.css”；
导入“/index.css”；
类LoginForm扩展了React.Component{
passwordInput=null；
componentDidMount（）{
this.passwordInput.focus（）；
}
render（）{
返回(
{
this.passwordInput=输入；
}}
/>
);
}
}
render（，document.getElementById（“根”））；

有时您使用ref指向组件而不是DOM元素，因此，请尝试以下操作：

如果是来自antd库的输入组件：

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;

import React，{useRef，useffect}来自“React”；
从“antd”导入{Input，Form}；
导入“antd/dist/antd.css”；
常量MyComponent=（）=>{
//与React.createRef（）相同
const passwordInput=useRef（null）；
useffect（（）=>{
if（passwordInput.current）{
//或者，如果ref中有输入组件，则使用输入属性，如：
//passwordInput.current.input.focus（）；
passwordInput.current.focus（）；
}
}，[passwordInput]）；
返回(
);
};
导出默认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;

import React，{useRef，useffect}来自“React”；
常量myComponent 2=（）=>{
const passwordInput=useRef（null）；
useffect（（）=>{
if（passwordInput.current）{
passwordInput.current.focus（）；
}
}，[passwordInput]）；
返回(
);
};
导出默认myComponent 2；

这是一个例子

p.S.useEffect钩子的工作原理与componentDidMount在类组件中的工作原理几乎相同，没有显示您尝试过的代码，不可能给出任何具体建议。抱歉，请稍候，我将发布一个codesandbox链接。感谢您的回复，使用Input的类型attr时没有问题。但是我用了。表单。输入密码类型并在3.12.0中添加。我在codesandbox中发布了一个示例，您可以发现
和
之间有什么主要区别吗？