React-bootstrap-daterangepicker с вводом ведет себя странно

Question

Я пытаюсь использовать response-bootstrap-datepicker с входами внутри него, и я столкнулся с неприятной ошибкой: каждый раз, когда я нажимаю на один из входов или нажимаю любую клавишу, календарьпереключается (отображается, если он был скрыт и наоборот).Я воспроизвел это на codesandbox: https://codesandbox.io/s/4zx1l0n6p4 Вы также можете увидеть версии зависимостей, которые я там использую.Я не уверен, что проблема в пакете или в моем коде, поэтому буду признателен за любую помощь!

Answer 1

Обновление: мне удалось заставить его работать, установив версию 3.4.0 и заменив два входа одним входом: https://codesandbox.io/s/kwy30z9rl3. Ошибка, которую я описал, вероятно, вызвана добавлением div-оболочки в один изболее поздние версии.В последней версии response-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 входным/ button и применяет необходимые обработчики событий:

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

И так как рассматриваемый элемент является простым делителем, каждый щелчок или нажатие клавиши на входе вызывает переключение.

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