reactjs - 处理搜索点击将路由到 URL 和 redux 上的同时调度功能

Question

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 并且它也会调用 redux 调度。

这里的按钮会点击很多次，但我只想在第一次点击时调用路由？是否有任何方法可以在单击按钮时仅进行一次呼叫路由，然后在后续单击时不导航到路由。

问候，

标签： reactjsreduxreact-redux

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

搜索

这现在应该只触发一次。