带有输入的 React-bootstrap-daterangepicker 行为怪异

Question

我正在尝试使用带有输入的react-bootstrap-datepicker，但遇到了一个令人不快的错误：每次单击其中一个输入或按任意键时，都会切换日历（如果它被隐藏并且显示反之亦然）。我在代码沙箱上复制了它：https://codesandbox.io/s/4zx1l0n6p4 你还可以看到我在那里使用的依赖项的版本。 我不确定问题出在包中还是在我的代码中，因此我将不胜感激！

Answer 1

您需要更新您的代码以喜欢这样，并且需要在日期选择器中添加处理程序以在您选择日期时处理更改。我在您的代码中添加了 handelEvent 方法。

import React from "react";
import ReactDOM from "react-dom";

import "./styles.css";
import "bootstrap/dist/css/bootstrap.css";
import DateRangePicker from "react-bootstrap-daterangepicker";
// you will need the css that comes with bootstrap@3. if you are using
// a tool like webpack, you can do the following:
import "bootstrap/dist/css/bootstrap.css";
// you will also need the css that comes with bootstrap-daterangepicker
import "bootstrap-daterangepicker/daterangepicker.css";

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      inputStart: "01/01/2018",
      inputFinish: "02/01/2018"
    };
    this.handleEvent = this.handleEvent.bind(this);
  }
  handleChangeS = event => {
    event.preventDefault();
    event.stopPropagation();
    this.setState({ inputStart: event.target.value });
  };
  handleChangeF = event => {
    this.setState({ inputFinish: event.target.value });
  };

  handleEvent(event, picker) {
    this.setState({
      inputStart: picker.startDate,
      inputFinish: picker.endDate
    });
  }
  render() {
    return (
      <div className="App" style={{ paddingTop: 30 }}>
        <DateRangePicker
          autoApply={true}
          autoUpdateInput={false}
          startDate={this.state.inputStart}
          endDate={this.state.inputFinish}
          locale={{ format: "DD/MM/YYYY" }}
          onEvent={this.handleEvent}
        >
          <input
            type="text"
            value={this.state.inputStart}
            onChange={this.handleChangeS}
          />
          <input
            type="text"
            value={this.state.inputFinish}
            onChange={this.handleChangeF}
          />
        </DateRangePicker>
      </div>
    );
  }
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

Answer 2

更新：我设法通过安装 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，因此输入上的每次点击或按键都会触发切换。