фокусировка компонента ввода antd из другого компонента

Question

import React from 'react'
import Input as InputAnt from 'antd'

class myInput extends React.Component {
  constructor(props) {
    super(props);
    this.inputRef = React.createRef();
  }

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

  render() {
    return (
      <InputAnt ref={this.inputRef}/>
    )
  }
}

export default myInput;

Здесь InputAnt получает фокус, но меня беспокоит то, что: компонент myInput может использоваться многими другими компонентами для визуализации ввода вместе со многими другими компонентами. Поэтому, возможно, я не хочу, чтобы ввод фокусировался во всех случаях, где используется компонент myInput, я хочу сосредоточиться только на конкретном сценарии ios, как этого достичь?

Answer 1

Просто передайте дополнительную опору, когда вы используете myinput.

<myInput shouldFocus />

и в componentDidMount ловушке жизненного цикла:

componentDidMount() {
   if (this.props.shouldFocus) {
     this.inputRef.current.focus();     
   }
}

и когда вы хотите использовать myInput но не хочу фокусировать ввод, просто используйте его как:

<myInput />