javascript - React DatePicker 切换问题

Question

我正在我的项目中使用这个插件。 https://reactdatepicker.com

有一些 Prop showTimeSelect 该 Prop 采用 bool 值并隐藏或显示时间选择器。

我试图为用户提供有关选择时间选择器的选项，因此我尝试创建一些 onClick 事件并使此 Prop 成为有条件的。

但有时有效，有时无效..

我不明白问题出在哪里，这是我的代码:

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，它有时可以直接工作，有时您需要单击日期选择器外部，然后再次单击内部。

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 。查看two其他有用的属性 onCalendarClose 和 onCalendarOpen