addEventListener("click"・・・・とやったときは要素内のoffsetがとれたのに、直接要素にonClick={}とやったらoffsetがとれなくなった。

Question

###addEventListener("click"・・・・とやったときは要素内のoffsetがとれたのに、直接要素にonClick={}とやったらoffsetがとれなくなった。
タイトル通りです。
ある要素内においてクリックした場所を取得しようとしています。
かつて以下のようなコードを書き実現できていました。

var folder = document.querySelector("#folder");
folder.addEventListener("click", function (e) {
        var x = e.offsetX;
        console.log(x)
    }
}
・・・
export default class Town extends React.Component {
//略
<div className="Town" id="folder">
</div>
//略
}

しかし直接要素にonClick={}と指定する必要がでてきました。(clickしたらstateに保持したpushでルーティング等したいため)
なので以下のようにリファクタリングしました。がタイトル通りなぜかxの値がNaNになってしまいます。

export default class Town extends React.Component {
//略
　　handleFolderClick =(e)=>{
        var x = e.offsetX;
        console.log(x)
    };

//略
<div className="Town" id="folder"　onClick={(e) => this.handleFolderClick(e)}>
</div>
//略
}

これはなぜでしょうか原因がまったく推測できません。
どうかアドバイスいただけたらと思います。

Answer 1

var x = e.nativeEvent.offsetX
とやって解決できました。reactは普通のイベントをラップする形をとっているようですね。