重新渲染后重置react-day-picker状态

时间:2018-06-10 15:21:41

标签: javascript reactjs redux-form react-day-picker

所以基本上在我的应用程序中,我有一个功能,通过填写表单来创建新事件。

不幸的是问题是我有一个DayPicker组件,其中多选https://react-day-picker.js.org/examples/selected-multiple,我希望在卸载时将其清除,因为我想在每个新表单中都有新的空日历。没有那个DayPicker记忆旧状态。

我也在使用https://redux-form.com/7.3.0/docs/gettingstarted.md/

中的redux-form

我是如何实现这一目标的?

MultiDayPicker

import React, {Component} from 'react';
import DayPicker, {DateUtils} from 'react-day-picker';
import PropTypes from 'prop-types';

import 'react-day-picker/lib/style.css';

export default class MultiDayPicker extends Component {

  state = {
    selectedDays: []
  };

  handleDayClick = (day, {selected}) => {
    const {selectedDays} = this.state;

    if (selected) {
      const selectedIndex = selectedDays.findIndex(selectedDay =>
        DateUtils.isSameDay(selectedDay, day)
      );

      selectedDays.splice(selectedIndex, 1);
    } else {
      selectedDays.push(day);
    }

    this.setState({selectedDays});
    this.props.input.onChange(selectedDays);
  };

  render() {
    return (
      <div>
        <DayPicker
          selectedDays={this.state.selectedDays}
          onDayClick={this.handleDayClick}
        />
      </div>
    );
  }
}

0 个答案:

没有答案