Обработка поискового нажатия приведет к URL-адресу и функции отправки в то же время при повторном запуске

#reactjs #redux #react-redux

#reactjs #повторный запуск #реагируйте-повторный запуск

Вопрос:

 handleClick = () => {
    const {providerName,googleAddress,planOption} = this.state;
     let params = {}
    params.providerName = providerName;
    params.address = googleAddress;
    params.planOption = planOption;
    this.props.pcpSearch(params); //redux call disptach

    let pathName = customerId ? `/providers/customers/${customerId}/list/` : `/providers/list/`;
    this.props.history.push({
      pathname: pathName
    });
  };
  
  <Button onClick={this.handleClick}>Search</Button>  

У меня есть один небольшой код, который используется для обработки поискового нажатия, и в то же время он перенаправит на указанный URL-адрес, а также вызовет повторную отправку.

Здесь кнопка будет нажиматься так много раз, но я хочу вызвать route только при первом нажатии? есть ли какой-либо способ выполнить маршрут вызова только один раз, когда кнопка будет нажата, и после этого не переходить к маршруту при последующем нажатии.

С уважением,

Комментарии:

1. Вероятно, вам следует отключить ее после того, как вы нажмете на нее один раз.

Ответ №1:

Вы можете использовать state для обработки того, был ли он нажат или нет:

 state = {
  clicked: false
};

handleClick = () => {
  const {providerName, googleAddress, planOption} = this.state;
  const params = { providerName, address: googleAddress, planOption };

  if (!this.state.clicked) {
    this.props.pcpSearch(params); //redux call disptach

    let pathName = customerId ? `/providers/customers/${customerId}/list/` : `/providers/list/`;
    this.props.history.push({
      pathname: pathName
    });
  } else {
    this.setState({ clicked: true });
  }
};
  

Поиск

Теперь это должно срабатывать только один раз.