score:0

there's no difference between them.

however, this is a part of proposed class fields for arrow functions and it isn't a es6 feature.

have a look at other answer.

score:2

because the function will be called from the global context, so this will not refer to your class instance, it will be undefined why ? because when a change event occurs, react will simply call your method like this youhandler(event), you can see that the function will not have this value as it's called from the global context. i give you an example in pure javascript (outside of react scope) :

<input id="myinput" type="text" onchange="myfunction()">

<script>
 "use strict";

 function myfunction() {
   console.log(this); // this is undefined here
 }
</script>

so you need to use bind method to set the value of this, which will be equal to the current class instance

moreover an arrow function does not have its own this; the this value of the enclosing lexical context is used when you create an arrow function. you can read the doc here so if you write :

handlechange = event => {
   this.setstate({value: event.target.value});
}

you have to ask yourself the following question : what is the value of this when the handlechange function is created ? here it will be equal to the current instance of nameform class, and this is actually what you want.


Related Query

More Query from same tag