Seven Lee Seven Lee - 3 months ago 10
React JSX Question

React_Redux: Pass parameter in callback during continually callback function

I have problem about passing parameter in callback function. I use

redux-form
, when I change select in
SkinList
, then it triggers
onChange
call back -
activeSkinChange
method

in
activeSkinChange
, call
handlSkinChange
that came from SkinList handlSkinChange property.
I need to pass select value to handlSkinChange (event.target.value)

export default class SkinList extends Component {
activeSkinChange = (event) => {
this.props.handlSkinChange(event.target.value);
}

render() {
const { skinList, activeSkin } = this.props;

return (
<div>
<select className="form-control" onChange={this.activeSkinChange} value={activeSkin}>
{this.renderOptions(skinList)}
</select>
</div>
);
}
}


then move outside of SkinList:

export default class Control extends Component {
onHandlSkinChange = (?, ?) => {

};

render() {
return (
<Field
name="skin.colors.activeSkin"
component={activeSkin =>
<SkinList skinList={skinList} activeSkin={activeSkin} handlSkinChange={this.onHandlSkinChange(activeSkin)}/>
}/>
);
}
}


handlSkinChange
will trigger callback
this.onHandlSkinChange
,
I also need pass another parameter
activeSkin
in
this.onHandlSkinChange()
on SkinList props, but it will encounter error..

it means there are two parameters to need to pass in
onHandlSkinChange
method, one is selection value(event.target.value), another is activeSkin
How should I do let me pass parameter in callback function during continually callback function?
Any idea?

Answer
export default class SkinList extends Component {
    activeSkinChange (event){
        this.props.handlSkinChange(event.target.value);
    }

    render() {
        const { skinList, activeSkin } = this.props;
        return (
            <div>
                <select className="form-control" onChange={this.activeSkinChange.bind(this)} value={activeSkin}>
                    {this.renderOptions(skinList)}
                </select>
            </div>
        );
    }
}

export default class Control extends Component {
  onHandlSkinChange (value, activeSkin ) {
     console.log("CHECK",value,activeSkin);
  }

  render() {
    return (
      <Field
        name="skin.colors.activeSkin"
        component={activeSkin => <SkinList skinList={skinList} activeSkin={activeSkin}
         handlSkinChange={v=>this.onHandlSkinChange(v,activeSkin)}/>
      }/>
    );
  }
}