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

我注意到，只有在显示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>
    );
  }
}

签出code sandbox。查看two其他有用的道具onCalendarClose和onCalendarOpen

反应DatePicker切换问题

1 个答案: