Menu
I see some syntax like below in some react-js libraries. What is that mean and how can help me in my codes?
const inputAttributes = {
id: 'events-playground',
placeholder: 'Where are you now?',
onChange: ::this.onInputChanged,
onBlur: ::this.onInputBlurred
};
Thanks.
891
It goes like this. A JavaScript class is just a syntactical sugar of a constructor function, an important concept of JavaScript, which is used to create objects. And the this keyword inside the constructor function refers to an object which consists of all the properties and methods declared using the this keyword.
In React when we use event handlers we basically give a reference of a function to that event handler and when that event occurs that function gets invoked, here's a catch, it's invoked at some point of time not immediately, and when its invoked, it's invoked as its own, there is now any components instance object ...
the ${} is the syntax for variables (or other code to be executed) inside template literals (`).
(three dots in JavaScript) is called the Spread Syntax or Spread Operator. This allows an iterable such as an array expression or string to be expanded or an object expression to be expanded wherever placed. This is not specific to React. It is a JavaScript operator.
It is new ES7 syntax for .bind,
equivalent in ES5
const inputAttributes = {
id: 'events-playground',
placeholder: 'Where are you now?',
onChange: this.onInputChanged.bind(this),
onBlur: this.onInputBlurred.bind(this)
};
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
