所以基本上在我的应用程序中,我有一个功能,通过填写表单来创建新事件。
不幸的是问题是我有一个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>
);
}
}