React textfield onChange事件

Question

Let me explain what I'm trying to do : I have a page, that present information from a web service . I've also used the web service paging (send the desired page in the url params) for my TablePagintation so I won't store unneccesary information .

Now I also wan't to filter my data . I can't simply filter the result returned from the web service , since it only contains 10 records(because of the paging method) , so I need to call the web service again, but this time with a search query and it will return the filtered result (which should also be presented with paging via tablePagintation)

The problem is, I don't know how I can reach my current state filter, inside the method the calls the web service ..

My text field :

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

My setBrokersListFilter :

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

So far, its correctly updating the state , but now I need to call my method getBrokers , with the state filter to recall the web service .

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

So how can I access the state in these methods , so I won't override the existing filter (while changing a page or the filter)

What can I do ?

Answer 1

I've managed to solve the problem by adding a handler that will call both methods .

onChange handler :

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