时间戳

首页 > 解决方案 > 反应文本字段 onChange 事件

javascript - 反应文本字段 onChange 事件

问题描述

让我解释一下我要做什么：我有一个页面，它显示来自网络服务的信息。我还为我使用了网络服务分页（在 url 参数中发送所需的页面），TablePagintation因此我不会存储不必要的信息。

现在我也不想过滤我的数据。我不能简单地过滤从 web 服务返回的结果，因为它只包含 10 条记录（因为分页方法），所以我需要再次调用 web 服务，但这次使用搜索查询，它将返回过滤结果（也应该通过 tablePagintation 显示分页）

问题是，我不知道如何在调用 Web 服务的方法内访问我当前的状态过滤器..

我的文本字段：

  <TextField
    id="filter"
    helperText={labels.filterHelperText}
    value={props.brokersListFilter}
    onChange={props.setBrokersListFilter}
    className={props.classes.textField}/>

我的setBrokersListFilter：

export const setBrokersListFilter = (event) => {
    return dispatch => {
      dispatch({
        type: actionNames.SET_BROKERSLIST_FILTER,
        brokersListFilter: event.target.value
      })
    }
}

到目前为止，它正确更新了状态，但现在我需要调用我的方法getBrokers，使用状态过滤器来调用 Web 服务。

export const getBrokers = (page) => {
  return async dispatch => {
    try {
      filter = filter ? filter : '' // HERE I WANT THE STATE FILTER AS DEFAULT
      dispatch({type: appActionNames.TOGGLE_LOADING})
      const res = await fetch(`/...?pageNumber=${page + 1}&pageSize=10&searchQuery=${filter}`, {
        method: 'GET',
        headers: {
          "Accept": "application/json; charset=utf-8"
        }
      })
      .....

那么如何在这些方法中访问状态，这样我就不会覆盖现有的过滤器（在更改页面或过滤器时）

我能做些什么 ？

标签： javascriptreactjs

解决方案

我已经设法通过添加一个调用这两种方法的处理程序来解决这个问题。

onChange处理程序：

<TextField
  id="filter"
  helperText={labels.filterHelperText}
  value={props.brokersListFilter}
  onChange={props.onFilterChange }
  className={props.classes.textField}/>
........
onFilterChange = (event) => {
  this.props.setBrokersListFilter(event)
  this.props.getBrokers(this.props.brokersListPage, this.props.brokersListFilter)
}

推荐阅读