当onDayChange选择一天时，react日期选择器自定义输入失去焦点

Question

我正试图将DayPickerInput与自己的自定义输入一起使用，但当输入时，一旦选择了一天，就会失去焦点。如果尝试键入例如：2020-08-20，当输入到"2020-08-2"时，它会选择第2个日期作为日期，并取消对输入的聚焦，不允许用户输入到20。

这是一个代码沙箱，我在其中复制了这个问题。

DayPickerInput:的用法

<DayPickerInput
component={(props) => <CustomInput {...props} />}
value={value}
onDayChange={setValue} />

还有我的自定义输入组件：

import React from "react";
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} />;
}
}
export default Input;

我看到了这个问题，并尝试了那里解释的内容，但它不起作用，我不确定还能尝试什么。

感谢您的指导！谢谢

Answer 1

我觉得有点傻，因为我一发布问题就找到了解决方案。尽管如此，这是为了防止其他人也有同样的问题。

我必须添加一个转发的ref，以便在我的onDayChange函数中调用ref.current.focus()，现在焦点保持不变。这是最后的代码：(我相信沙箱已经更新到正确的解决方案，因为我在里面玩(

function Example() {
const [value, setValue] = React.useState(null);
const ref = React.useRef(null);
return (
<div>
<h3>DayPickerInput</h3>
<DayPickerInput
component={React.forwardRef((props, ref) => <CustomInput {...props} innerRef={ref}/>)}
value={value}
inputProps={{ ref: ref }}
onDayChange={async day => {
await setValue(day);
// need to call focus here to keep focus on the input
ref.current.focus();
}}
/>
</div>
);
}

在自定义输入中，ref不再在此组件中定义，而是通过props:转发

import React from "react";
class Input extends React.Component {
focus() {
this.props.innerRef.current.focus();
}
render() {
return <input {...this.props} ref={this.props.innerRef} />;
}
}
export default Input;