Компонент onClick of Tab не запускается

Question

Я использую компонент Tab библиотеки material-ui для реакции.

Я пытаюсь найти решение проблемы, с которой я сталкиваюсь, но мой слушатель onClick, похоже, не запущен.

Пример одной из моих вкладок:

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

Однако номер страницы в локальном хранилище не изменяется при нажатии на эту вкладку.

В качестве альтернативы я попытался поместить код onClick в отдельную функцию многократного использования, но это срабатывает только при загрузке веб-приложения и, следовательно, после нажатия на одну из вкладок нет изменения 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);
}