react-datetime + open 和 disableOnClickOutside 道具不能一起工作答案

【问题标题】：react-datetime + open and disableOnClickOutside prop don't work togetherreact-datetime + open 和 disableOnClickOutside 道具不能一起工作
【发布时间】：2017-12-14 03:18:43
【问题描述】：

我的代码在这里关闭日期选择器有问题。我正在使用这个npm package

/* eslint linebreak-style: ["error", "windows"] */
/* eslint-disable no-unused-vars */
import React, { Component } from 'react';
import Datetime from 'react-datetime';

const toDay = new Date();
const month = toDay.getMonth();
let date = toDay.getDate();
let hours = toDay.getHours() % 12;
const amPm = toDay.getHours() >= 12 ? 'PM' : 'AM';
hours = hours > 0 ? hours : 12;
console.log(hours);
console.log(toDay.getHours());
let minutes = toDay.getMinutes();
const obj = { readOnly: true };
if (hours < 10) {
  hours = `0${hours}`;
}
if ((minutes % 5) > 0) {
  minutes += (5 - (minutes % 5));
}
if (minutes > 55) {
  minutes = 0;
  hours += 1;
  if (hours > 12) {
    hours = 12;
    date += 1;
  }
}
if (minutes < 10) {
  minutes = `0${minutes}`;
}
const timeobj = {
  minutes: {
    step: 5,
  },
};
const monthNames = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
  'Jul', 'Aug', 'Sept', 'Oct', 'Nov', 'Dec',
];

const yesterday = Datetime.moment().subtract(1, 'day');
const maxDays = Datetime.moment().add(6, 'month');
const valid = current => current.isAfter(yesterday) && current.isBefore(maxDays);


export default class DatePicker extends Component {
  constructor() {
    super();
    this.state = {
      // open: true,
    };
  }
  
  render() {
    return (
      <Datetime
        timeConstraints={timeobj}
        isValidDate={valid}
        defaultValue={`${monthNames[month]} ${date} at ${hours}:${minutes} ${amPm}`}
        dateFormat="MMM DD [at]"
        inputProps={obj}             
        open
        closeOnSelect
        disableOnClickOutside={false}
      />
    );
  }
}

使用，当我选择时，此代码日期选择器默认打开，然后日期选择器将关闭。但我的问题是当我点击外面然后日期选择器没有关闭所以当我点击外面时我应该如何关闭这个日期选择器。

【问题讨论】：

不确定，但我认为原因是，您定义了 open 属性 true 这就是为什么，删除 open 属性并让 Datetime 处理该部分。
我会尝试同样的方法，但没有成功

标签： reactjs react-datetime

【解决方案1】：

从<Datetime /> 中删除open 那么它将起作用。阅读有关 open https://github.com/YouCanBookMe/react-datetime 的文档

【讨论】：

请检查。在这里我添加了我的完整组件。
嗨。我从中删除了 open 然后，当我第一次在该日期选择器文本框中单击该时间日期选择器时，该时间日期选择器将打开，但是当我第二次同时单击时，日期选择器现在关闭，然后当我单击外部然后打开日期选择器第二次。
是的，在那个 babel 中运行良好，但在我的组件中，相同的代码不起作用。:(