3 ms·

I usually do this when I need to pass arguements in: <button onClick={ (arg) => this.smth(arg) }></button> How can I do this without defining a function?

by wongma 8y ago

tills13 8y ago
isn't that functionally equivalent to `onClick={ this.smth }`?
- barskern 8y ago
  No it is not equal because the former autobinds `this` into the body of the arrow function, however the latter is "just" a function pointer hence will not be called with the correct `this` value. One way to get around this is using `this.smth.bind(this)`, which binds the correct `this` for the later execution.
- wongma 8y ago
  no, because you're not passing the arg in now right?
  - williamdclt 8y ago
    Of course you are. The `smth` method will receive whatever arguments the caller gives. This totally works but only if `smth` has been declared as an arrow function (so that is captures the class `this` context).
minitech 8y ago
> How can I do this without defining a function? You do define a function, but only once. Constructor: this.smth = this.smth.bind(this); JSX: <button onClick={this.smth}></button> Kind of awkward, but the standard practice last I checked. Arrow methods (terminology?) are also something you can add to the language that does the equivalent of .bind() replacements.
cygned 8y ago
For simple use cases, we also use this pattern, however, usually moved to separate functions for readability, real example: createOpener(folder) { return () => this.props.dispatch(Actions.listFiles(folder, this.props.member)); } As said, for more complex layouts we need to reduce moving parts. For example, we have input masks that can easily consist of 200 input fields alone plus all kinds of other components. What we do in that case is usually pre-binding functions with arguments. Roughly like this: // Target function onItemClicked(item) { // ... } preBind() { const { data } = this.props; // Bind with primary key data.forEach(item => { this[`__boundFn_data_${item.get('primaryKey')}`] = this.onItemClicked.bind(this, item); }) } render() { const { data } = this.props; return <Fragment> { data.map(item => { const pk = item.get('primaryKey'); return <div key={pk} onClick={this[`__boundFn_data_${pk}`]}>{ item.get('label') }</div> }) } </Fragment> } This approach involves a lot more complexity concerning removing bound functions and caching. And things like function name generation is stored in separate functions etc. It's not trivial but you get some performance out of it. By doing this, though, we can rely on props checks for components to determined the necessity of rendering which allows us to use React's PureComponent in 90% of our components.

I usually do this when I need to pass arguements in: <button onClick={ (arg) => this.smth(arg) }></button> How can I do this without defining a function?

by wongma 8y ago

I usually do this when I need to pass arguements in: <button onClick={ (arg) => this.smth(arg) }></button> How can I do this without defining a function?

tills13 8y ago

isn't that functionally equivalent to `onClick={ this.smth }`?

barskern 8y ago
No it is not equal because the former autobinds `this` into the body of the arrow function, however the latter is "just" a function pointer hence will not be called with the correct `this` value. One way to get around this is using `this.smth.bind(this)`, which binds the correct `this` for the later execution.
wongma 8y ago
no, because you're not passing the arg in now right?
- williamdclt 8y ago
  Of course you are. The `smth` method will receive whatever arguments the caller gives. This totally works but only if `smth` has been declared as an arrow function (so that is captures the class `this` context).

minitech 8y ago

> How can I do this without defining a function? You do define a function, but only once. Constructor: this.smth = this.smth.bind(this); JSX: <button onClick={this.smth}></button> Kind of awkward, but the standard practice last I checked. Arrow methods (terminology?) are also something you can add to the language that does the equivalent of .bind() replacements.

cygned 8y ago

For simple use cases, we also use this pattern, however, usually moved to separate functions for readability, real example: createOpener(folder) { return () => this.props.dispatch(Actions.listFiles(folder, this.props.member)); } As said, for more complex layouts we need to reduce moving parts. For example, we have input masks that can easily consist of 200 input fields alone plus all kinds of other components. What we do in that case is usually pre-binding functions with arguments. Roughly like this: // Target function onItemClicked(item) { // ... } preBind() { const { data } = this.props; // Bind with primary key data.forEach(item => { this[`__boundFn_data_${item.get('primaryKey')}`] = this.onItemClicked.bind(this, item); }) } render() { const { data } = this.props; return <Fragment> { data.map(item => { const pk = item.get('primaryKey'); return <div key={pk} onClick={this[`__boundFn_data_${pk}`]}>{ item.get('label') }</div> }) } </Fragment> } This approach involves a lot more complexity concerning removing bound functions and caching. And things like function name generation is stored in separate functions etc. It's not trivial but you get some performance out of it. By doing this, though, we can rely on props checks for components to determined the necessity of rendering which allows us to use React's PureComponent in 90% of our components.