React-select: add custom parameters into onChange callback

[alexeiberkov]

It will be very good to add custom parameters into onChange callback function.

Just like this:

    fireChangeEvent: function fireChangeEvent(newState) {
        if (newState.value !== this.state.value && this.props.onChange) {
            this.props.onChange(newState.value, newState.values, this.props.onChangeArguments);
        }
    },

var model = {
'a': 10
};

onItemChange: function(newState, newStates, customArgs) {
  console.log(customArgs);
}

<Select asyncOptions={this.loadOptions} placeholder={gettext('Item')} onChange={this.onItemChange} onChangeArguments={model}/>

I can commit it if it is okay for you.

[dcousens]

@alexeiberkov probably best to make a PR, but I'm not entirely sure what value this feature adds to the API.

[alexeiberkov]

onChange function contains only "new" and "old" values. And there is no way to pass something else.
For example we have Select in component A and the ItemChange handler at component B. There is no way to communicate between them. If component were able to pass additional arguments into this.props.onChange it would be easier to solve such example.

[dcousens]

I'm still not following your example, sorry.
Why is the component that has the Select component not the one that is managing it?

[alexeiberkov]

Maybe I am wrong in case no one else have such problems :) We can close this issue.

[dcousens]

@alexeiberkov maybe not, but I'm still interested in your issue, also maybe someone else will be find the elaboration useful, even if its not actually something lacking in react-select.

[alexeiberkov]

Will try to add example

[nvma]

My use case involves rendering several Select components based on contents of another Select component. Essentially it looks something like that:

const { selected } = this.state;
...
{selected.map(item =>
  <Select
    value={item.tags}
    multi
    options={options}
    onChange={this.handleSelect}
    />
)}

Whenever I edit one of the Select components, I need to locate them in this.state.selected array and update accordingly. But since there are only values being passed in onChange handler I have no way to accomplish this, which is really unfortunate since it's imperative that I do that and I really like this otherwise amazing library. If I could pass an item in onChangeArguments={item} it would've been just wonderful.

[nvma]

On the second approach, onChange={(e) => this.handleSelect(item, e)} kind of does it.

[MarcoRob]

@nvma How do you do your handleSelect() function, I am trying to get the values and save it on my state component...

[mukkachaitanya]

Or what about this approach? onChange=this.handleSelect.bind(this, e) .

[ziaadini]

if i have a switch :
onValueChange = {(value)=>{this.toggleSwitch2(value,"custom value")}}
value = {this.state.switch1Value} />
your function:
toggleSwitch2 = (value,second) => {
this.setState({switch1Value: value})
console.log('Switch 2 value and second is: ' + value+second)
}