CODEWITHSUNDEEP
javascriptreactjscallbackreduxreact-redux
Seven Lee
Seven Lee

Reputation: 627

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?

Upvotes: 1

Views: 380

Answers (1)

Kokovin Vladislav
Kokovin Vladislav

Reputation: 10421

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)}/>
      }/>
    );
  }
}

Upvotes: 1

Related Questions