Problems with the status of react click events

recently, when using react to solve click events, it is found that the effect of using state with setstate is good. Replace it with mobx and fail.
the following code:
import React, {Component} from "react"
import {Card, Button} from" antd"
import {BarList} from ". / inventoryStore";
import * as styles from". / style.pcss";
import {InventoryTable} from ". / inventoryTable";

class BarExtra extends Component {
constructor (props) {

super(props)
this.state = {
  barTitle: ""
}

}
onClick = item = > e = > {

// inventoryStore.changeBarTitle(item)
this.setState({
  barTitle: item
})

}

render () {

const _style = {
  color: "-sharp1890ff"
};
return (
  <>
    {
      BarList.map((item, index) => {
        return<a key={index}
                 className={styles.bar}
                 onClick={this.onClick(item)}
                 style={item === this.state.barTitle? _style : {} }
        >
        <span>{item}</span>
        </a>
      })
    }
  </>
)

}
}
it"s good to write as shown in the picture, but replace it with

in mobx.

@ action changeBarTitle (item) {

this.barTitle = item

}
that makes it invalid

Apr.17,2022

action is to be written in store, and then in the components that need to be used in store, introduce

first
this.props.store.changeBarTitle()
MySQL Query : SELECT * FROM `codeshelper`.`v9_news` WHERE status=99 AND catid='6' ORDER BY rand() LIMIT 5
MySQL Error : Disk full (/tmp/#sql-temptable-64f5-7ae771-2772b.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
MySQL Errno : 1021
Message : Disk full (/tmp/#sql-temptable-64f5-7ae771-2772b.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
Need Help?