I'm have a filter form within my app that has normal input fields as well as a date range input (AirBnb's react-dates plugin). On submitting the filter form, I'd like the form to clear all fields. However, I haven't been able to find a way to access the fields within the react-dates component, since it is a child component.
So far, I have tried placing a "ref" on the Component as follows:
<DateRangePickerWrapper ref="daterange"/>
And then selecting the ref through the following function:
filterButton(data,e){
let refs = this.refs
for(const key in refs){
if(!(key === "daterange")){
refs[key].value = ""
}else{
console.log(this.refs["daterange"])
}
}
}
However- I receive a "Connect" object upon log instead of the actual Component since I am using Redux.:
Connect {props: {…}, context: {…}, refs: {…}, updater: {…}, version: 15, …}
I tried adding the "forwardRef" option to the Component export, however- I still receive the Connect object...
export default connect(mapStateToProps, { forwardRef: true})(DateRangePickerWrapper);
If there is an easier way to reset the input besides going through the Components, I am more than happy to change to that method instead..
Thanks for your time!
From the react-dates
README.md that you linked to in your question:
<DateRangePicker
startDate={this.state.startDate} // momentPropTypes.momentObj or null,
endDate={this.state.endDate} // momentPropTypes.momentObj or null,
// ... more props...
/>
The props startDate
and endDate
accept null
as a value, which has the effect of clearing the selected dates.