React-day-picker Daypicker Input теряет фокус при использовании пользовательского компонента ввода

Question

Я пытался реализовать простой ввод выбора дня, в котором вы можете как ввести дату в поле ввода, так и выбрать ее в выборе.

Проблема заключается в том, что при использовании пользовательского ввода <DayPickerInput component ={CustomInput}.../>, вход теряет фокус при использовании средства выбора.Это не происходит без пользовательского ввода.В документах написано

«Если вы хотите сохранить фокус, когда пользователь выбирает день, класс компонента должен иметь метод фокусировки.»

Однако яЯ не уверен, как я должен это реализовать.Любая помощь будет оценена.Моя песочница: https://codesandbox.io/s/react-day-picker-base-h9fv6

Answer 1

Если вам нужен пользовательский компонент с методом фокусировки, я думаю, вам нужно использовать компонент класса, и refs :

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

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

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