不触发onClick组件的onClick

Question

我正在使用material-ui库的Tab组件进行反应。

我正在尝试为我遇到的问题实现hackery解决方案，但我的onClick侦听器似乎没有被触发。

我的一个标签示例：

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

但是，当我单击此选项卡时，本地存储中的pageNumber不会更改。

或者我已经尝试将onClick代码放入一个单独的可重用函数中，但这仅在Web应用程序启动时触发，并且在单击任一选项卡后随后没有更改pageNumber。

对于这个问题，我似乎可以使用react-router，但这不是我想要的。我想知道如何在单击选项卡时更改本地存储。

提前致谢

pageNumber没有改变（总是设置为3）：

<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(no) {
  localStorage.setItem('pageNumber',no);
}

Answer 1

onClick不会触发Tab您需要使用onChange Tabs而不是key属性使用value

 <Tabs style={style.tabstyle} onChange={this.setPageNumber} value={this.state.checked} >
            <Tab value={3} style={styles.tabstyles}   />
            <Tab value={4} style={styles.tabstyles} />
 </Tabs>

setPageNumber功能

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

  

您需要在构造函数中绑定setPageNumber函数

constructor(props) {
  super(props);
  this.state = {
    checked: null,
  }
  this.setPageNumber = this.setPageNumber.bind(this);
}