0

在为日期选择器设置最小-最大日期时，我遇到了超出最大调用堆栈大小的问题。我有两个日期选择器（凝视日期，结束日期）。当我选择开始日期时，我正在为结束日期选择器设置最小日期，当我选择结束日期时，我正在为开始日期选择器设置最大日期。

提供同样的沙箱。

代码沙箱示例

下面我提供相同的代码：

Flatpickr 组件

import React, {Component} from 'react';
import Flatpickr from 'react-flatpickr';
import 'flatpickr/dist/flatpickr.min.css';
import 'flatpickr/dist/themes/light.css';

export default class DatePicker extends Component {
  constructor(props) {
    super(props);
    this.setDate = this.setDate.bind(this);
    this.setDatePickerProps = this.setDatePickerProps.bind(this);

    this.state = {
      selectValue: props.selectValue ? props.selectValue : "",
      options: props.options ? props.options : {},
      placeholder: props.placeholder ? props.placeholder : {}
    };
  }

  componentWillReceiveProps(newProps){
    this.setState({
      selectValue: newProps.selectValue ? newProps.selectValue : "",
      options: newProps.options ? newProps.options : {},
      placeholder: newProps.placeholder ? newProps.placeholder : {}
        });
  }

  setDatePickerProps(propKey, propValue){
    this.refs.refDatePicker.flatpickr.set(propKey, propValue);
  }

  clearDate(){
    this.refs.refDatePicker.flatpickr.clear();
  }

  setDate(newValue){
    this.setState({
             selectValue: newValue ? newValue : ""
        });
    if(this.props.onChange){
      this.props.onChange(newValue);
    }
  }

  render(){
    return (
      <Flatpickr className="form-control clickable" ref="refDatePicker" placeholder={this.state.placeholder} options={this.state.options} value={this.state.selectValue} onValueUpdate={this.setDate} />
    );
  }
}

下面是在父组件上设置最小和最大日期的代码。

onFilterDateChange(str, date){
    if(str === "start"){
      this.refEndDatePicker.setDatePickerProps("minDate", date[0] ? date[0] : "");
      this.setState({
        objSearch: Object.assign({},this.state.objSearch,{ startDate: date[0] ? date[0] : ""})
      });
    }
    else if(str === "end"){
      this.refStartDatePicker.setDatePickerProps("maxDate", date[0] ? date[0] : "");
      this.setState({
        objSearch: Object.assign({},this.state.objSearch,{ endDate: date[0] ? date[0] : ""})
      });
    }
  }

当我选择开始日期时，一切正常，但是一旦我选择结束日期，它就会显示此错误"RangeError: Maximum call stack size exceeded"。

环境信息

使用的 flatpickr 版本：3.6.4

浏览器名称和版本：Chrome，版本 70.0.3538.110（官方构建）（64 位）

操作系统和版本：Windows 10 Pro

4

0 回答 0