How to correctly bind function with arguments in component?

Question

I've been using React for a few months now, and one of the things I'm finding most difficult is how to properly bind functions that take arguments.

Currently, I have three inputs that share a single update function, but require a different first argument to be passed. Here is my component:

class MyComponent extends Component {
  render() {
    const { onChange } = this.props;
    return(
      <div className='my_component'>
        <Row>
          <Column>
            <Input 
              value={item1} 
              onChange={ (newValue) => onChange('item1', newValue) } />
          </Column>
        </Row>
        <Row>
          <Column>
            <Input 
              value={item2} 
              onChange={ (newValue) => onChange('item2', newValue) } />
          </Column>
        </Row>
        <Row>
          <Column>
            <Input 
              value={item3} 
              onChange={ (newValue) => onChange('item3', newValue) } />
          </Column>
        </Row>
      </div>
    );
  }
}

So, currently, I'm using arrow functions in my render function of the component. But through research, I've found that obviously has performance issue in terms of re-rendering.

The solution offered is to bind in the constructor using

constructor() {
  super();
  this.handleChange = this.handleChange.bind(this)
}

handleChange(event) {
  this.props.onChange('ARGUMENT REQUIRED!', event.target.value);
}

The problem is, that I cannot get that first argument to work... Am I supposed to create a function for each and bind one for each in the constructor, like so:

constructor() {
  super();
  this.handleItem1Change= this.handleItem1Change.bind(this)
  this.handleItem2Change= this.handleItem2Change.bind(this)
  this.handleItem3Change= this.handleItem3Change.bind(this)
}

handleItem1Change(newValue) {
    this.props.onChange('item1', newValue);
}
handleItem2Change(event) {
    this.props.onChange('item2', newValue);
}
handleItem3Change(event) {
    this.props.onChange('item3', newValue);
}

That seems repetitive...is there a more streamlined way to do this?

Have you tried: onChange={ (newValue) => onChange.bind(this, 'item1') } /> — KornholioBeavis
– KornholioBeavis, Commented Mar 22, 2017 at 19:10
Yes and store this 'item1' in some kind of refs for the input element. So when u call: onChange={ (newValue) => onChange(this, this.refs) }... just check once for using the strings in ref. — Ayan
– Ayan, Commented Mar 22, 2017 at 19:13
@bergi The newValue is passed from the input callback, and I messed up the event.target.value that is was is passed up, so it is just the new value. That is relatively irrelevant to the problem at hand, though. — Tom Nolan
– Tom Nolan, Commented Mar 22, 2017 at 19:21

finalfreq · Accepted Answer · 2017-03-22 19:20:25Z

2

If you have control of the Input component, why not have a prop such as name and then in the Input component pass in the onChange function as a prop.

In the Input component whereever you are handling the change you could just do.

<Input 
 value={item3} 
 onChange={ onChange } 
 name='item3'

/>

// in the Input component
handleChange = (value) => {
  this.props.onChange(value, this.props.name)
}

and then you would just need to update your onChange to put the value first and the name second. Reason for doing it that way is to ensure this doesn't break your Input component in the other places that it is used since value will still be the first argument, and name is a secondary optional argument.

if you are passing the event back in the onChange instead of value you can still use the event and just do e.target.name as long as you are applying the name prop to the input thats rendered in Input and would look like:

handleChange(event) {
  this.props.onChange(event.target.name, event.target.value);
}

answered Mar 22, 2017 at 19:20

finalfreq

7,0202 gold badges29 silver badges28 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Tom Nolan Over a year ago

I like this a lot. This definitely works. I originally didn't have a name prop, but I probably should have anyway!

finalfreq Over a year ago

What I have found is that anytime you are needing to reuse a function and don't want to bind the arguments, then you just need to have a component that can be delegated as the provider of said argument based on its props.

Bergi · Accepted Answer · 2017-03-22 19:15:34Z

1

You can pass arguments that you want to partially apply right into bind:

constructor() {
  super();
  this.handleItem1Change = this.props.onChange.bind(this, 'item1');
  this.handleItem2Change = this.props.onChange.bind(this, 'item2');
  this.handleItem3Change = this.props.onChange.bind(this, 'item3');
}

Alternatively, you can still use arrow functions there:

constructor() {
  super();
  this.handleItem1Change = newValue => this.props.onChange('item1', newValue);
  this.handleItem2Change = newValue => this.props.onChange('item2', newValue);
  this.handleItem3Change = newValue => this.props.onChange('item3', newValue);
}

answered Mar 22, 2017 at 19:15

Bergi

671k162 gold badges1k silver badges1.5k bronze badges

3 Comments

Tom Nolan Over a year ago

Right, but that's essentially the same as my second solution. It definitely works, but is relatively repetitive. Was hoping there might be a way to do it with a single bound function instead of declaring a new binding for each.

Bergi Over a year ago

@TomNolan Of course you can do that in a loop or whatever, but for only three items that might not save a lot

Bergi Over a year ago

Btw, I guess the most idiomatic React way would be to let the Row (or Column or Input) component handle all this, so that you don't have to repeat it in MyComponent

KornholioBeavis · Accepted Answer · 2017-03-22 19:29:34Z

0

Just add a new layer of abstraction, something like this::

form.js //use the component RowInput
<RowInput name={'item1'} value={'item'} onChange={onChange} />

RowInput.js // stupid/dumb component
export const RowInput = (name, item, onChange)=>
          <Column>
            <Input 
              value={item} 
              onChange={ (val) => onChange(name) } />
          </Column>

answered Mar 22, 2017 at 19:29

KornholioBeavis

2,4522 gold badges20 silver badges26 bronze badges

Comments

toms25 · Accepted Answer · 2017-03-22 19:13:35Z

-1

you could try this to bind the on change callback

<Input value={item1} onChange={onChange.bind(null,'item1') } />

the callback will look like this

onChange(item, event)

answered Mar 22, 2017 at 19:13

toms25

876 bronze badges

1 Comment

finalfreq Over a year ago

This will cause the same issue that the OP is trying to solve which is not binding the function in the render method which will cause unnecessary rerenders on the component

Collectives™ on Stack Overflow

How to correctly bind function with arguments in component?

4 Answers 4

2 Comments

3 Comments

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

2 Comments

3 Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related