Реагировать на проблему переключения DatePicker - PullRequest
Новая
       17

Реагировать на проблему переключения DatePicker

0 голосов
/ 06 ноября 2019

Я использую этот плагин в своем проекте. https://reactdatepicker.com

Есть некоторая пропа showTimeSelect, эта пропила принимает логическое значение и скрывает или показывает время выбора.

Я пытаюсь дать пользователю возможность выбрать средство выбора времени, поэтому я попытался создать событие onClick и сделать это условие условным.

Но иногда это работает, иногда нет ..

Я не понимаю, в чем проблема, вот мой код: 

import React from "react";
import ReactDOM from "react-dom";
import DatePicker from "react-datepicker";
import "react-datepicker/dist/react-datepicker.css";

import "./styles.css";

class App extends React.Component {
  state = {
    startDate: new Date()
  };

  handleChange = date => {
    this.setState({
      startDate: date,
      showTime: false
    });
  };

  showTimeSelection = () => {
    this.setState({
      showTime: !this.state.showTime
    });
  };
  render() {
    return (
      <div>
        <DatePicker
          selected={this.state.startDate}
          onChange={this.handleChange}
          showTimeSelect={this.state.showTime}
        >
          {" "}
          <div>
            <a onClick={() => this.showTimeSelection()}>
              TOGGLE TIME SELECTION
            </a>
          </div>{" "}
        </DatePicker>
      </div>
    );
  }
}

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

, а вот codesandbox пример

Вы можете примерить codeSandBox, иногда это работает напрямую, иногда вам нужно щелкнуть за пределами DatePicker и щелкнуть внутри снова.

1 Ответ

1 голос
/ 06 ноября 2019

Я заметил, что это работает, только если showTimeSelect равно true до того, как будет отображаться DatePicker. Таким образом, перед закрытием DatePicker необходимо установить showTimeSelect в true. Вы можете сделать это в подпорке onClickOutside 

 state = {
    startDate: new Date(),
    showTime: true
  };

  handleChange = date => {
    this.setState({
      startDate: date
    });
  };

  showTimeSelection = () => {
    this.setState({
      showTime: !this.state.showTime
    });
  };
  render() {
    const { startDate, showTime } = this.state;
    return (
      <div>
        <DatePicker
          selected={startDate}
          onChange={this.handleChange}
          showTimeSelect={showTime}
          onClickOutside={() => this.setState({ showTime: true })}
        >
          <div onClick={this.showTimeSelection} style={{ cursor: "pointer" }}>
            <h4>TOGGLE TIME SELECTION</h4>
          </div>
        </DatePicker>
      </div>
    );
  }
}

проверить код песочницы . проверить два другие полезные реквизиты onCalendarClose и onCalendarOpen

...