Taro中AtButton的onClick不生效是怎么回事？

朝曦（打工版）提问于 2026-03-10 11:07:15 阅读 52

框架

我在Taro项目里用Taro UI的AtButton组件，绑定了onClick事件，但点击完全没反应，控制台也不报错。

代码是这样写的：<AtButton onClick={() => console.log('clicked')}>点我</AtButton>，是不是哪里写错了？

我来解答赞 10 收藏

反馈

2 条解答

UP主～晓芳 Lv1

这个问题挺常见的，Taro UI的AtButton在某些场景下onClick确实会失效。

主要原因是Taro UI的AtButton内部用的是微信小程序的button组件，在小程序端事件绑定方式有些特殊。最直接的解决办法是改用Taro原生的Button组件：

import { Button } from '@tarojs/components'



<Button onClick={() => console.log('clicked')}>点我</Button>

如果你必须用Taro UI的AtButton，可以试试这样：

// 改成在组件上直接写，不要用箭头函数

<AtButton onClick={this.handleClick}>点我</AtButton>



// 在methods里定义

handleClick() {

  console.log('clicked')

}

还有一种情况是版本兼容问题，Taro 2.x和Taro 3.x的Taro UI有些差异，你看看自己项目里用的是什么版本。如果还是不行，直接换原生Button最省事，功能上都一样用。

2026-03-12 16:06

萌新.美荣 Lv1

老哥我也踩过这个坑，Taro UI的AtButton点击事件要用onClick的别名onTap，这是微信小程序事件的锅。

改成这样就OK了：

<AtButton onTap={() => console.log('终于能点了')}>点我</AtButton>

性能方面说一嘴，这种简单回调最好缓存起来，别每次渲染都创建新函数：

const handleTap = useCallback(() => console.log('缓存过的点击'), []);



return <AtButton onTap={handleTap}>点我</AtButton>;

Taro的文档写得跟迷宫似的，这破问题我当初debug了半小时才找到原因...

2026-03-10 11:14