已解决：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 {&nbsp; constructor(props) {&nbsp; &nbsp; super(props);&nbsp; &nbsp; this.inputRef = React.createRef();&nbsp; }&nbsp; focus() {&nbsp; &nbsp; this.inputRef.current.focus();&nbsp; }&nbsp; render() {&nbsp; &nbsp; return <input {...this.props} ref={this.inputRef}/>&nbsp; }}