React DatePicker 切换问题

Question

我在我的项目中使用这个插件。 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外面点击然后再点击里面。

Answer 1

我注意到只有在 DatePicker 显示之前 showTimeSelect 是 true 时它才有效。因此，在关闭 DatePicker 之前，您必须将 showTimeSelect 设置为 true。你可以在 prop 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>
    );
  }
}

查看 code sandbox . check out two 其他有用的道具 onCalendarClose 和 onCalendarOpen

React DatePicker 切换问题

React DatePicker toggle issue

javascript

reactjs

react-datepicker