Javascript 已解决：使用自定义输入组件时，React day picker Daypicker输入失去焦点

工作沙箱是

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

问题是当我使用自定义输入时，

，当使用选择器时，输入失去焦点。如果没有自定义输入，则不会发生这种情况。文件上写着

如果要在用户选择日期时保持焦点，则组件类必须具有焦点方法

---

但是，我不确定应该如何实现这一点。

如果您需要具有焦点方法的自定义组件，我认为您需要使用类组件，并且：

类输入扩展了React.Component{
建造师（道具）{
超级（道具）；
this.inputRef=React.createRef（）；
}
焦点（）{
this.inputRef.current.focus（）；
}
render（）{
回来
}
}

我使用“react text mask”库中的MaskedInput组件，以及“react day picker”中的“带有两个输入的日期范围选择器”的自定义覆盖组件

自定义覆盖和输入：

const renderMaskedInput = (_props, _ref) => {
        return (
           <MaskedInput
             mask={getLocaleMask}
             showMask
             ref={_ref}
             type="text"
             render={(ref, inputProps) => <input ref={ref} {...inputProps} />}
             {..._props}
      />
    );};


<DayPickerInput
   component={_props => renderMaskedInput(_props, startInputRef)}
   overlayComponent={_props => (
      <Popper
        open={Boolean(startAnchorEl)}
        anchorEl={startAnchorEl}
        style={{ zIndex: 10000 }}
      >
        <div {..._props} className={customOverlayWrapper}>
          <div className={customOverlay}>{_props.children}</div>
        </div>
      </Popper>
    )}

const renderMaskedInput=（\u props，\u ref）=>{
返回(
}
{…{u props}
/>
);};
renderMaskedInput（_props，startInputRef）}
OverlyComponent={u props=>(
{{u props.children}
)}

我的问题是，打开或单击自定义覆盖时，从选择器输入中丢失焦点，，并且“keepFocus”道具不适用于自定义输入。因此，单击背景后关闭覆盖会导致问题，因为覆盖仅通过输入的“onBlur”关闭

仅仅通过onClick或其他方式将焦点硬设置在输入上是不起作用的我的解决方案是在自定义覆盖打开时更改输入参考后将焦点设置为有效，但这还不够，因为在单击覆盖后焦点会丢失，因此我们只需将焦点设置为在DayPicker的3个处理程序之后输入：onFocus、onMonthChange、onCaptionChange（参见codesandbox示例）

将其用作DayPickerInput的自定义覆盖解决了在屏幕自由区域渲染覆盖的问题（覆盖的自动定位）。此外，Popper与Portal一起工作，解决了渲染覆盖的许多问题

完整代码：

短版：

    const focusStartInput = () => {
      startInputRef.current.inputElement.focus();
    }
    
    useEffect(() => {
    // used because 'keepFocus' prop from the library does not work with the custom 
    //   overlay or with the react-text-mask input
    
    if (startAnchorEl) {
      // if the start picker overlay is open
      focusStartInput(); // input loses focus after overlay opening,
                         // so just reset focus
    }

    if (endAnchorEl) {
      // if the end picker overlay is open
      focusEndInput(); // input loses focus after overlay opening, so just reset focus
    }
  }, [startAnchorEl, endAnchorEl]);

<DayPickerInput
   dayPickerProps={{ 
     onMonthChange: focusStartInput,
     onFocus: focusStartInput,
     onCaptionClick: focusStartInput,
   }}
   

const focusStartInput=（）=>{
startInputRef.current.inputElement.focus（）；
}
useffect（（）=>{
//使用此选项是因为库中的“keepFocus”道具不适用于自定义
//覆盖或使用react文本掩码输入
if（startAnchorEl）{
//如果“开始选择器覆盖”处于打开状态
focusStartInput（）；//覆盖打开后，输入失去焦点，
//所以只要重新设定焦点
}
if（endAnchorEl）{
//如果端点选择器覆盖打开
focusEndInput（）；//覆盖打开后，输入失去焦点，所以只需重置焦点即可
}
}，[startAnchorEl，endAnchorEl]）；
    const focusStartInput = () => {
      startInputRef.current.inputElement.focus();
    }
    
    useEffect(() => {
    // used because 'keepFocus' prop from the library does not work with the custom 
    //   overlay or with the react-text-mask input
    
    if (startAnchorEl) {
      // if the start picker overlay is open
      focusStartInput(); // input loses focus after overlay opening,
                         // so just reset focus
    }

    if (endAnchorEl) {
      // if the end picker overlay is open
      focusEndInput(); // input loses focus after overlay opening, so just reset focus
    }
  }, [startAnchorEl, endAnchorEl]);

<DayPickerInput
   dayPickerProps={{ 
     onMonthChange: focusStartInput,
     onFocus: focusStartInput,
     onCaptionClick: focusStartInput,
   }}