Material-UI Tab组件onClick事件未触发，点击无法修改localStorage

嘿，我一眼就看出问题所在啦！你现在的代码里，onClick绑定的不是函数引用，而是直接执行了函数，这就导致组件一渲染就把localStorage给改了，而点击Tab的时候根本没触发新的执行。咱们一步步来修复：

问题根源 #

当你写这样的代码时：

<Tab key={4} style={styles.tabstyles} onClick={localStorage.setItem('pageNumber', 3)} />

或者这样：

<Tab key={3} style={styles.tabstyles} onClick={this.setPageNumber(2)} />

React在渲染这个Tab组件的瞬间，就会立即执行localStorage.setItem(...)或this.setPageNumber(...)，把函数执行的结果（这里是undefined）赋值给onClick。所以当你点击Tab时，没有任何可执行的函数，自然不会修改localStorage。

解决方案 #

我们需要给onClick传递一个函数引用，让它在点击时才执行逻辑。有两种简单的方式：

方案1：直接用箭头函数包裹逻辑 #

把你的localStorage操作放在箭头函数里，这样只有点击时才会执行：

<Tab key={4} style={styles.tabstyles} onClick={() => localStorage.setItem('pageNumber', 3)} />

方案2：封装函数时用箭头函数传递参数 #

如果你想用独立的setPageNumber函数，同样需要用箭头函数包裹，确保点击时才调用并传递参数：

<Tabs style={style.tabstyle}>
  <Tab key={3} style={styles.tabstyles} onClick={() => this.setPageNumber(2)} />
  <Tab key={4} style={styles.tabstyles} onClick={() => this.setPageNumber(3)} />
</Tabs>

你的setPageNumber函数不用改，保持原样就行：

setPageNumber(no) {
  localStorage.setItem('pageNumber', no);
}

这样修改后，每次点击对应的Tab，都会触发函数执行，把正确的页码存入localStorage啦！

内容的提问来源于stack exchange，提问作者noob