【发布时间】：2017-02-25 03:09:35
【问题描述】：
我有一个简单的 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 在它处理日期选择器的单击事件之前被调用，以使用所选日期填充该字段.
-
我单击该字段，日期选择器弹出，自动聚焦，正确模糊，除非我单击任何不是
或日期选择器的内容。
我首先尝试使用包含整个页面的同级空 div，因此当我单击空 div 时，它会正确切换日期选择器。这适用于 z-indexes 和 position: fixed 直到我更改了 datepicker 的月份，这似乎重新渲染了 datepicker 并弄乱了点击的顺序，这又导致了情况 2)。
我最近的尝试是在日期选择器 div 弹出时自动聚焦它，所以当我模糊任何不是日期选择器的东西时，它会切换日期选择器。这在理论上是有效的，除了 datepicker 是一个内部有许多嵌套
<div>，而不是最初关注的根“datepicker”<div>。
上面的解决方案是调整'datepicker'<div>的onBlur，这样它只会在document.activeElement为
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);
DateInput.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;
DatePicker.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
日期选择器可以正确切换，除非单击另一个字段，此时它会停止正确模糊/切换。我所有的修修补补要么导致我进入上面列出的三个场景之一。
【问题讨论】：
标签： reactjs datepicker redux redux-form react-day-picker