jquery - 带输入的 React-bootstrap-daterangepicker 行为异常

Question

我正在尝试使用 react-bootstrap-datepicker里面有输入，我遇到了一个令人不快的错误:每次我单击其中一个输入或按任意键时，日历都会被切换(如果它被隐藏则显示，反之亦然)。我在codesandbox上复制了它:https://codesandbox.io/s/4zx1l0n6p4您还可以看到我在那里使用的依赖项的版本。我不确定问题是在包中还是在我的代码中，所以我将不胜感激任何帮助!

Answer 1

更新:我设法通过安装版本 3.4.0 并用单个输入替换两个输入来使其正常工作:https://codesandbox.io/s/kwy30z9rl3 。我描述的错误可能是由于在后续版本之一中添加了包装器 div 引起的。在最新版本中，react-bootstrap-daterangepicker 将您传递给它的所有子项包装到容器中:

render() {
const { children, containerStyles, containerClass } = this.props;
return (
  <div
    ref={picker => {
      this.$picker = $(picker);
    }}
    className={containerClass}
    style={containerStyles}
  >
    {children}
  </div>
);

}

bootstrap-daterangepicker 检查日期选择器的父级是否是输入/按钮并应用必要的事件处理程序:

if (this.element.is('input') || this.element.is('button')) {
this.element.on({
    'click.daterangepicker': $.proxy(this.show, this),
    'focus.daterangepicker': $.proxy(this.show, this),
    'keyup.daterangepicker': $.proxy(this.elementChanged, this),
    'keydown.daterangepicker': $.proxy(this.keydown, this) //IE 11 compatibility
});
} else {
    this.element.on('click.daterangepicker', $.proxy(this.toggle, this));
    this.element.on('keydown.daterangepicker', $.proxy(this.toggle, this));
}

由于相关元素是一个普通的 div，因此输入上的每次点击或按键都会触发切换。