Как установить фокус на компонент ввода antd Input.Password?

Question

Я пытаюсь установить фокус на input.password поле.Возможно ли это?

Я не видел никакой информации по документам antd.Интересно, если это возможно

Input(Input.TextArea) имеет свойство Input(textAreaRef) через ref.но в Input.Password я ничего не могу найти по этому поводу.Есть ли способ решить мой вопрос?

Answer 1

Ввод пароля не отличается от других текстовых вводов.Сначала вы должны создать ссылку на вход, затем вы можете вызвать его метод 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"));

Попробуйте здесь

Answer 2

Вы также можете использовать ссылки для 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>
    )
  }
}

Ссылки предоставляют способ доступа к узлам DOM или элементам React, созданным в методе рендеринга.