What is wrong here. Riot VS Regular JS

Hey guys, I just started learning Riot and I am still pretty confused on why some code works in regular JS but not in Riot. Please take a look of the code.

_ Riot _ that is not working…

 \<html\>\<p class="gotolesson1" ref="gotolesson1" onclick={ onClick }\>Go To Lesson\</p\>\</html\>\<script\> this.onClick = function (event) { this.refs.gotolesson1.location.href = "https://codepen.io/yn2329/live/pKZvGb"; }; \</script\>

_ Regular JS _ that works

 \<html\>\<p id="gotolesson1" ref="gotolesson1" onclick="myFunction()"\>Go To Lesson\</p\>\</html\>\<script\> document.querySelector("#gotolesson1").onclick = function() { location.href = "https://codepen.io/yn2329/live/pKZvGb"; }; \</script\>

Could somebody please take a look of my code and tell me what is wrong here?
Appreciated!!!  :blush: