Question

我试图将react-bootstrap-datepicker与其中的输入一起使用，但遇到一个令人不愉快的错误：每次单击其中一个输入或按任意键时，都会切换日历（显示是否为日历）隐藏，反之亦然）。我在codeandbox上复制了它：https://codesandbox.io/s/4zx1l0n6p4您还可以在此处看到我使用的依赖项的版本。我不确定问题是在软件包中还是在代码中，所以我将不胜感激！

Answer 1

更新：我通过安装3.4.0版并将两个输入替换为单个输入https://codesandbox.io/s/kwy30z9rl3来使其能够正常工作。我描述的错误可能是由于在更高版本之一中增加了wrapper 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检查datepicker的父级是否为输入/按钮，并使用必要的事件处理程序：

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，因此每次单击输入或输入时都会触发切换。

Answer 2

您需要像这样更新代码，并且需要在日期选择器中添加处理程序，以在选择日期时处理更改。我已经在您的代码中添加了 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);

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

2 个答案: