已解决：React-day-picker Daypicker Input 在使用自定义输入组件时

Question

工作沙箱是https://codesandbox.io/s/react-day-picker-base-h9fv6我一直在尝试实现一个简单的日期选择器输入，您可以在输入字段中输入日期并在选择器中进行选择。问题是，当我使用自定义输入 <DayPickerInput component ={CustomInput}.../>时，使用选择器时输入会失去焦点。如果没有自定义输入，这不会发生。在文档中它说“如果你想在用户选择一天时保持焦点，组件类必须有一个焦点方法。”但是我不确定我应该如何实现这一点。

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

  }

}