使用Ant Design做多条件搜索时,第一次点击查询按钮,页面会刷新一次,第二次点击则正常查询显示。问题解决方案。

问题:使用Ant Design做多条件搜索时,第一次点击查询按钮,页面会重新加载一次,第二次点击则正常查询显示。

排查过程:

  1. 首先看搜索按钮点击触发的时候有无循环,有时候死循环会导致这个问题。
  2. 是否频闭按钮本身的事件。(博主就是这个错)

查了很多资料,最后知道Ant Design的按钮会有一个本身的事件,完美需要执行自己方法的时候需要屏蔽它。只需要在搜索的方法的第一行加入 e.preventDefault() 屏蔽本身按钮事件就行!

代码如下:

 //查询方法
  handleSearch = e => {
    e.preventDefault();
    ……//方法体
}

 

你可能感兴趣的:(react,antd)