反應 DatePicker 切換問題

Question

我在我的項目中使用這個插件。 https://reactdatepicker.com

有一些道具showTimeSelect這個道具采用 boolean 值並隱藏或顯示時間選擇器。

我試圖為用戶提供關於選擇時間選擇器的選項，所以我嘗試制作一些 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 它有時可以直接工作，有時您需要單擊 datepicker 外部並再次單擊內部。

Answer 1

我注意到它只有在顯示DatePicker之前showTimeSelect為true時才有效。 因此，在關閉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