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.
Source: stackoverflow.com
Related Query
- Why do I need 'bind(this)' in the example above
- Why do I need to pass an anonymous function into the onClick event?
- Why we don't need to bind the arrow function in React?
- React how to remove listners correctly in componentWillUnmount, why do I need the bind in the constructor?
- Why styles don't update when saving the files in Tailwind CSS JIT mode and I need to restart the server?
- Why I cant see image in the example of material -ui-v3.2.0 "Image avatars "
- What is the benefit of having $sce or Strict Contextual Escaping in angularjs and why react does not need to do it?
- Why does the react-sortable-hoc basic example fail to compile with typescript?
- Why does the name of the state object not need to match the name in setState?
- Why is useEffect not working here? Do I need to change the condition?
- Why does ReactDOM.render need to call function or class components again after creating the virtual DOM?
- Why do we need to export the connect method for it to work?
- Why do we need to return a function in the React Hook?
- why does redux need to make a copy of the data each time it changes?
- Why useEffect warns for the fields that I do not need to put in the dependencies array?
- Why do I need to use array destructuring in function to re-render the component?
- why do we need to put the onViewableItemsChanged prop inside a useRef hook in react native
- Why do you need to apply the two generated class names (root & disabled) to the DOM to make it work?
- Basic React question. why is useEffect needed in this example from the React documentation?
- Why do I need to specify the props type if I supply a generic type to a React.FC?
- Why do I need the new Context API? The value is already imported
- Why do we need to render variable with @ in front of variable name , in the rails 5 controller, to access the variable in the view
- Why I need to provide the location object to Switch component to make exit animation work?
- Why do I need to define the event handler `handleStatusChange` in `useEffect`?
- Why do you need div in the render function for ReactJS components?
- Why do I need to use ReactJS state to update UI after AJAX in the following scenario
- Why need to pass a callback accepting the previous state?
- Why do I need to refresh the page when using Link and Switch with react-router-dom?
- In react context need help understanding why in react re-renders all consumers every time the Provider re-renders?
- why I need to refresh the page to get the new state In react Express
More Query from same tag
- How to add scroll into react-bootstrap Modal.Body
- How do I render a file from the electronjs menu to a react element?
- Sending a JWT in header with Apollo/GraphQL
- When using React / Redux, how is dispatching an action that merely changes the Redux state vs actually doing some task?
- Send two values onClick React
- Symfony 4 how to setup SPA ( single page app ) with React?
- How to load virtual dom once the data from api are loaded React
- Save State of Canvas in React
- Why am i getting a unique key prop warning when i have a unique key?
- State property is updating but browser is not
- number formatting in antD tables, or localeCompare() number strings with commas
- Enable Copy Paste for expansion-panels
- class component to default export function
- Explanation for this complicated 'is not assignable to type' error in typescript
- Could not type any text inside textfield
- Im trying to encrypt the password in REACT so that every letter will printout as asterisk ` * `
- useEffect in React not update component after update store
- Cannot Read properties of undefined when mapping data from graphql using react typescript
- React.js returns blank page after npm start
- Use ts for tsx react files
- How to run data in react after useEffect
- Why is react-native-image-picker's showImagePicker undefined in React Native?
- React router with browserHistory goes to server on every URL change
- Alternative to createGlobalStyle from styled-components that can also be importable
- jQuery in react component
- Using jQuery and external scripts in Gatsby
- How can I make this work with less code and more efficiently? - Mapping Json and rendering components conditionally
- Background Video in React
- Map iterator undefined React.JS
- Can't Render Image When Path Stored in React Variable