我有这个简单的 v6 redux-form 带有一个输入，它呈现一个自定义组件，该组件使用 react-day-picker 填充其值。
https://github.com/gpbl/react-day-picker
我选择 react-day-picker 而不是其他，因为它不依赖于 moment.js 并且适用于我当前的设置。
当我聚焦该字段时，我希望日期选择器弹出，但如果我单击日期选择器以外的任何地方，我希望它消失。
本质上，我希望我的 React datepicker 像 jQueryUI 一样工作：
https://jqueryui.com/datepicker/
我最终得到的三个场景是：
我单击该字段，日期选择器会弹出，但不会消失，除非我选择一个日期或再次单击该字段（这对我们的需求来说太严格了）。
我单击该字段，日期选择器会弹出，但是如果我单击任何地方，它会很快消失，因为在处理日期选择器的单击事件以使用所选日期填充该字段之前，会调用输入字段的 onBlur。
我单击该字段，日期选择器弹出，自动聚焦，正确模糊，除非我单击任何不是 <body> 或日期选择器的内容。
我首先尝试使用包裹整个页面的同级空 div，因此当我单击空 div 时，它会正确切换日期选择器。这适用于 z-indexes 和 position: 固定，直到我更改 datepicker 的月份，这似乎重新渲染 datepicker 并弄乱了单击的顺序，这又导致了情况 2)。
我最近的尝试是在日期选择器 div 弹出时自动聚焦它，所以当我模糊任何不是日期选择器的东西时，它会切换日期选择器。这在理论上是有效的，除了 datepicker 是一个内部有许多嵌套 <div> 的组件来控制日、周、月、禁用天......所以当我单击“天”时，它会注册一个模糊，因为我“ m 单击 'day' <div>，而不是根 'datepicker' <div>，这是最初关注的内容。
上面的解决方案是调整 'datepicker'<div>的 onBlur，这样它只会在 document.activeElement 为 <body> 时切换日期选择器，但这仅在我不单击另一个表单字段时才有效。
WizardFormPageOne.js：
function WizardFormPageOne({ handleSubmit }) {
return (
<form onSubmit={handleSubmit} className="col-xs-6">
<h1>WizardFormPageOne</h1>
<div className="card">
<div className="card-block">
<div className="form-group">
<label htmlFor="first">Label 1</label>
<Field type="text" name="first" component={DateInput} className="form-control" />
</div>
...
export default reduxForm({
form: 'wizardForm',
destroyOnUnmount: false,
})(WizardFormPageOne);
日期输入.js：
import React from 'react';
import styles from './styles.css';
import DatePicker from '../DatePicker';
class DateInput extends React.Component { // eslint-disable-line react/prefer-stateless-function
constructor(props) {
super(props);
this.state = {
dateValue: new Date(),
activeDateWidget: false,
};
}
changeDate = (date) => {
this.setState({
dateValue: date,
});
}
changeActiveDateWidget = (e) => {
e.stopPropagation();
this.setState({
activeDateWidget: !this.state.activeDateWidget,
});
}
render() {
const { input, meta } = this.props;
const { dateValue, activeDateWidget } = this.state;
return (
<div className={styles.dateInput}>
<input
{...input}
className="form-control"
type="text"
value={dateValue}
onClick={this.changeActiveDateWidget}
// onBlur={this.changeActiveDateWidget}
/>
{activeDateWidget ? (
<div>
<DatePicker
changeActiveDateWidget={this.changeActiveDateWidget}
changeDate={this.changeDate}
dateValue={dateValue}
/>
</div>
) : (
<div></div>
)}
</div>
);
}
}
export default DateInput;
日期选择器.js：
import React from 'react';
import 'react-day-picker/lib/style.css';
import DayPicker, { DateUtils } from 'react-day-picker';
import styles from './styles.css';
import disabledDays from './disabledDays';
class DatePicker extends React.Component { // eslint-disable-line react/prefer-stateless-function
constructor(props) {
super(props);
this.state = {
selectedDay: new Date(),
};
}
componentDidMount() {
if (this._input) {
this._input.focus();
}
}
handleDayClick = (e, day, { disabled }) => {
e.stopPropagation();
if (disabled) {
return;
}
this.setState({ selectedDay: day }, () => {
this.props.changeDate(day);
this.props.changeActiveDateWidget();
});
}
focusThisComponent = (e) => {
if (e) {
this._input = e;
}
}
focusIt = () => {
console.log('focusing');
}
blurIt = () => {
console.log('blurring');
setTimeout(() => {
if (document.activeElement == document.body) {
this.props.changeActiveDateWidget();
}
}, 1);
}
render() {
const { changeActiveDateWidget } = this.props;
const { selectedDay } = this.state;
return (
<div
className={styles.datePicker}
ref={this.focusThisComponent}
tabIndex="1"
onFocus={this.focusIt}
onBlur={this.blurIt}
>
<DayPicker
id="THISTHING"
initialMonth={selectedDay}
disabledDays={disabledDays}
selectedDays={(day) => DateUtils.isSameDay(selectedDay, day)}
onDayClick={this.handleDayClick}
/>
</div>
);
}
}
export default DatePicker;
这是我现在遇到的问题的截屏：
http://screencast.com/t/kZuIwUzl
日期选择器正确切换，除非单击另一个字段，此时它会正确停止模糊/切换。我所有的修补都使我选择了上面列出的三个场景之一。