arrow-functions

React.js and arrow functions vs normal functions [duplicate]

故事扮演 提交于 2019-12-11 18:13:28
问题 This question already has an answer here : Are 'Arrow Functions' and 'Functions' equivalent / exchangeable? (1 answer) Closed last year . I was working on a react.js app and I initially used the arrow function which worked, but then just out of curiosity I decided to try the normal function and the normal function didn't work. I think that they both should output the same thing, what is going wrong? handleChange = event => this.setState({init: event.target.value}) handleChange(event){ this

react native arrow functions and geoQueries

不问归期 提交于 2019-12-11 14:54:55
问题 I am still struggling a little bit with arrow functions. I have previously made these posts: react native and globally accessible objects react native arrow functions and if statements But now I am having a new issue with how these can be used with geoQuery. I have tried the code shown below: myFunction = () => { var onKeyMovedRegistration = () => geoQuery.on("key_moved", function(key, location, distance) { console.log('Test log'); if (key != this.props.userID) { arraySearchResult =

TypeScript type definition; export default for using external JavaScript library in Angular2

前提是你 提交于 2019-12-11 13:17:47
问题 I'm trying to integrate a JavaScript library (bricks.js) that has no publicly available type definition. Basically, what the library is exporting is something like this: export default (config) => { const instance = SomeConstructorFunction(config); return instance; } I cannot figure out how to correctly create a type definition ( .d.ts ) for this function; either tsc compiles when I import, I get undefined or tsc won't compile. For this instance .d.ts compiles: declare module 'bricks.js' {

ES6 functions, arrow functions and 'this' in an ES6 class [duplicate]

橙三吉。 提交于 2019-12-11 12:27:42
问题 This question already has answers here : Should I write methods as arrow functions in Angular's class (3 answers) Arrow vs classic method in ES6 class (1 answer) Closed last year . class App extends Component { constructor(props) { ... } onChange = (e) => this.setState({term: e.target.value}) onSubmit(e){ e.preventDefault(); const api_key = "C1hha1quJAQZf2JUlK"; const url = `http://api.giphy.com/v1/gifs/search?q=${this.state.term}&api_key=${api_key}`; } render() { return ( <div> <form

React - Arrow functions and this and scope

别等时光非礼了梦想. 提交于 2019-12-11 04:27:15
问题 I have the following code. let myapp = this; myref.on('value', function (snapshot) { myapp.updateUsers(); }); I am trying to get rid of the code which fixes the scope issue. Can I convert this to an ES6 arrow function? Alternatively is there a way to access the react root app? class App extends Component {} 回答1: When you are inside a class and using an arrow function then this will get its reference binding to the instance via the lexical scope, instead of dynamic binding like you get with

Using _ (underscore) variable with arrow functions in ES6/Typescript

两盒软妹~` 提交于 2019-12-11 03:34:40
问题 I came across this construct in an Angular example and I wonder why this is chosen: _ => console.log('Not using any parameters'); I understand that the variable _ means don't care/not used but since it is the only variable is there any reason to prefer the use of _ over: () => console.log('Not using any parameters'); Surely this can't be about one character less to type. The () syntax conveys the intent better in my opinion and is also more type specific because otherwise I think the first

Avoid targeting the object scope of this inside a function in ES6

三世轮回 提交于 2019-12-10 15:38:54
问题 For instance I am running a project with D3.js, importing specific modules and calling on their functions. Setup: TypeScript/ES6 Importing specific D3 components Angular 6 I am having an object, in this case an angular directive, and drawing some circles onto a SVG canvas and want them to trigger a function on a drag event. Reduced code snippet: Please have a look on drawPoints() at the bottom of this snippet import { ElementRef, HostListener, Output, EventEmitter, OnInit, Input, OnChanges,

Difference between arrow function and bind()

杀马特。学长 韩版系。学妹 提交于 2019-12-10 12:18:38
问题 I am little confused about while object missing the reference(context). In TypeScript (shown here with some dummy parameters for explanatory reasons): Fat Arrow var x = new SomeClass(); someCallback(function(a){x.doSomething(a)});// some time this x object may missing the reference (context) of x object someCallback(a => x.doSomething(a));// if we using arrow function, then how it manage stabling the object context? which is doing same below bind()code. bind() : Functions created from

arrow functions: destructuring arguments and grabbing them as a whole at the same time

天涯浪子 提交于 2019-12-10 10:38:12
问题 Can we do both destructuring: ({a, b}) => ( a + b ) and grab the arguments: (...args) => ( f({...args}) ) , at the same time for arrow functions in ES6. Looking for something like (...args = {a, b}) => ( a + b + f({...args}) ) . My curent solution is to do something like: ({a, b}) => { const {...args} = {a, b} return a + b + f({...args}) } But it is redundant or (thanks to nnnnnn & Dmitry) (args) => { const {a, b} = args return a + b + f({...args}) } which is less redundant and definitely

Passing an arrow function vs passing the function in React

一世执手 提交于 2019-12-10 06:31:18
问题 Say i have a function: handleChange = (e) => { this.setState({ [e.target.id]: e.target.value }); } What is the difference between the following: 1. <FormControl value={this.state.password} onChange={this.handleChange} /> 2. <FormControl value={this.state.password} onChange={(e) => this.handleChange(e)} /> Thanks! 回答1: The second case an anonymous function is created which executes the handleChange method and and thereby providing it the context . Everytime the React component renders, a new