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