javascript - 已解决 : React-day-picker Daypicker Input loses focus when using custom input component

Question

工作沙箱是 https://codesandbox.io/s/react-day-picker-base-h9fv6

我一直在尝试实现一个简单的日期选择器输入，您可以在输入字段中输入日期并在选择器中进行选择。

问题是当我使用自定义输入时， <DayPickerInput component ={CustomInput}.../> ，使用选择器时输入会失去焦点。如果没有自定义输入，这种情况就不会发生。在文档中它说

"If you want to keep the focus when the user picks a day, the component class must have a focus method."

但是我不确定应该如何实现这个。

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