0

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!

mg2019
  • 191
  • 17

1 Answers1

1

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.

JMadelaine
  • 2,859
  • 1
  • 12
  • 17
  • Thanks- I guess I was really over complicating this. Since I'm using Redux, from my filter component, I was able to call my custom action `this.props.dispatch(updateStartDate(null))` to reset the startDate and the same for the endDate. Appreciate your time! – mg2019 Mar 13 '20 at 13:16