已解决：使用自定义输入组件时 React-day-picker Daypicker Input 失去焦点答案

【问题标题】：Solved: React-day-picker Daypicker Input loses focus when using custom input component已解决：使用自定义输入组件时 React-day-picker Daypicker Input 失去焦点
【发布时间】：2020-01-26 13:25:40
【问题描述】：

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

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

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

“如果要在用户选择一天时保持焦点，组件类必须有焦点方法。”

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

【问题讨论】：

标签： javascript reactjs react-day-picker

【解决方案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}/>
  }
}

【讨论】：

【解决方案2】：

我使用“react-text-mask”库中的 MaskedInput 组件，以及来自 ' 的“具有两个输入的日期范围选择器”的自定义叠加组件反应日选择器'。

自定义叠加和输入：

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

我的问题是打开或点击自定义叠加层时选择器输入失去焦点，而“keepFocus”道具是不适用于自定义输入。所以它会导致在点击背景后关闭叠加层出现问题，因为叠加层仅通过输入的“onBlur”关闭。

仅通过 onClick 或其他方法将焦点集中在输入上是行不通的。 我的解决方案是在打开自定义叠加层时更改输入引用后在useEffect中设置焦点，但这还不够，因为单击叠加层后焦点丢失，所以我们只是在3之后将焦点设置为输入DayPicker 的处理程序：onFocus、onMonthChange、onCaptionChange（参见代码框示例）。

使用Popper 作为 DayPickerInput 的自定义覆盖解决了在屏幕上的空闲区域呈现覆盖的问题（覆盖的自动定位）。此外，Popper 与 Portal 一起使用，它解决了渲染覆盖的许多问题。

完整代码：https://codesandbox.io/s/optimistic-glitter-c77gb

短版：

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

主要问题的解决方案存在问题。如果我们不点击日期选择器中的日期（在标题、月份导航或其他地方），他的输入就会失去焦点。 我的代码有助于解决它。

【讨论】：