Очистка ввода в компоненте React от родительского или родительского компонента - PullRequest
Новая
       4

Очистка ввода в компоненте React от родительского или родительского компонента

0 голосов
/ 13 марта 2020

У меня есть форма фильтра в моем приложении, которая имеет обычные поля ввода, а также ввод диапазона дат (плагин response-date для AirBnb). При отправке формы фильтра я хотел бы, чтобы форма очищала все поля. Однако я не смог найти способ получить доступ к полям в компоненте реагирующих дат, так как это дочерний компонент.

До сих пор я пытался поместить «ref» в Компонент следующим образом: 

    <DateRangePickerWrapper ref="daterange"/>

, а затем выбрал ref с помощью следующей функции: 

filterButton(data,e){

    let refs = this.refs

    for(const key in refs){

      if(!(key === "daterange")){
         refs[key].value = ""
       }else{
         console.log(this.refs["daterange"])

       }
    }
}

Однако - я получаю объект «Connect» в журнале вместо фактического компонента, так как я использую Redux.: * 10101 * 

Connect {props: {…}, context: {…}, refs: {…}, updater: {…}, version: 15, …}

Я попытался добавить опцию «forwardRef» в экспорт компонентов, однако - я все еще получить объект Connect ... 

export default connect(mapStateToProps, { forwardRef: true})(DateRangePickerWrapper);

Если есть более простой способ сброса ввода, помимо прохождения через Компоненты, я более чем рад вместо этого перейти на этот метод ..

Спасибо за ваше время!

1 Ответ

1 голос
/ 13 марта 2020

Из react-dates README.md, на который вы ссылались в своем вопросе: 

<DateRangePicker
  startDate={this.state.startDate} // momentPropTypes.momentObj or null,
  endDate={this.state.endDate} // momentPropTypes.momentObj or null,
  // ... more props...
/>

Реквизиты startDate и endDate принимают null в качестве значения, которое имеет эффект очистка выбранных дат.

...