Question

我将ScalaJ和ReactJ与React-Table一起使用。我遇到了一个奇怪的问题，当我为特定列设置自定义Filter组件时，react-table中的Filter对象缺少过滤器值。它提供了筛选，但前提是这是我最后尝试筛选的内容，但是在输入值之后，它不会将正确的筛选对象传递给筛选器组件的Props。也就是如果我在Filter1中输入“ x”，则Filter对象仍将读取

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

奇怪的是，如果我有一个FilterComponent，那么所有列的默认设置都可以完美地工作。当我在其中一个过滤器中更改值时，更新道具后，它会显示在过滤器对象本身中。

在调试时，它看起来像FilterComponent在调用setState之后启动了对React-Table本身的prop更新，但没有启动Filter（特定列组件）。任何帮助将不胜感激，希望我缺少一些设置。

如果上面的解释有意义，您可以忽略多余的代码

类型定义和外观

   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))
 }

触发onChange后，React-Table筛选器未接收到值

0 个答案: