Фильтр React-Table не получает значение после срабатывания onChange - PullRequest
Новая
       24

Фильтр React-Table не получает значение после срабатывания onChange

0 голосов
/ 03 октября 2018

Я использую ScalaJ и ReactJ с React-Table.Я столкнулся со странной проблемой, когда в объекте Filter в реагирующей таблице отсутствует значение фильтра, когда я устанавливаю пользовательский компонент Filter для определенного столбца.Он выполняет фильтрацию при условии, что это последнее, что я пытался отфильтровать, но он не передает правильный объект фильтра в Props компонента фильтра после ввода значения.AKA, если я добавлю "x" в Filter1, объект Filter будет по-прежнему читать 

 {
     "id": "Filter1",
     "value": ""
 }

. Странно то, что если у меня есть FilterComponent, поэтому по умолчанию для всех столбцов он работает отлично.Когда я изменяю значение в одном из фильтров, оно отображается в самом объекте фильтра при обновлении реквизитов.

При отладке это выглядит так, как будто FilterComponent запускает обновление реквизита для самой React-Table после setStateвызывается, а фильтр (определенный компонент столбца) - нет.Буду признателен за любую помощь, надеясь, что я пропускаю только некоторые настройки.

Лишний код, который вы можете игнорировать, если приведенное выше объяснение имеет смысл

Определение типа и фасадов 

   type FilterRendererJS = js.Function1[FilterRendererValues, ReactNode]

   @js.native
   trait Filter extends js.Object {
     val id: String = js.native
     val value: String = js.native
     val pivotId: js.UndefOr[String] = js.native
   }

   object Filter {
     def apply(id: String, value: String, pivotId: js.UndefOr[String]): Filter = {
       lit(id = id, value = value, pivotId = pivotId).asInstanceOf[Filter]
     }
   }

   @js.native
   trait FilterRendererValues extends js.Object {
     val column: Column = js.native
     val filter: js.UndefOr[Filter] = js.native
     val onChange: js.Function1[String, Unit] = js.native
   }

Определение столбца 

 val filterCallback = if(dateTime) onFilter.orElse((filter: Filter) ⇒ Callback.empty) else onFilter

     val convFilterRenderer = filterCallback.map(fc ⇒ {
         (filterRendererValues: FilterRendererValues) ⇒ {
           val filter = filterRendererValues.filter.getOrElse(Filter(filterRendererValues.column.id.getOrElse(""), "", js.undefined))
           val key = s"columnFilterRenderer${filter.id}"

             FilterRenderer(key, filterRendererValues.column, filter, filterRendererValues.onChange, fc)
         }
       }: FilterRendererJS)

     lit(Cell = cellRenderer.toJs, Header = headerRenderer.toJs, Footer = footerRenderer.toJs,
       Filter = convFilterRenderer, ...).asInstanceOf[Column]

Фильтрующий элемент 

 object FilterRenderer {
   case class Props(column: Column, filter: Filter, reactTableOnChange: (String) ⇒ Unit,
                    onFilterModified: (Filter) ⇒ Callback)

   type State = Unit

   class Backend($: BackendScope[Props, State]) {
     private def onChange(text: String): Callback = $.props >>= { p ⇒
       Callback.log(s"Field text for ${p.filter.id} $text") >>
       Callback(p.reactTableOnChange(text)) >>
         p.onFilterModified(Filter(p.filter.id, text, p.filter.pivotId))
     }

     def render(p: Props, s: State): ReactElement = {
       println(s"Text Renderer id ${p.filter.id} value ${p.filter.value}")

       val inputKey = "header-filter-" + p.filter.id
       MuiTextField(key = inputKey, fullWidth = true, hintText = M("common.filter"), value = p.filter.value,
         onChange = textEvt(onChange))()
     }
   }

   final val component = ReactComponentB[Props]("CustomFilterRenderer")
     .stateless
     .renderBackend[Backend]
     .build

   def apply(key: String, column: Column, filter: Filter, reactTableOnChange: (String) ⇒ Unit,
             onFilterModified: (Filter) ⇒ Callback): ReactElement =
     component.withKey(key)(Props(column, filter, reactTableOnChange, onFilterModified))
 }
...