React_Redux：在连续回调函数期间在回调中传递参数答案

【问题标题】：React_Redux: Pass parameter in callback during continually callback functionReact_Redux：在连续回调函数期间在回调中传递参数
【发布时间】：2016-08-31 21:34:45
【问题描述】：

我在回调函数中传递参数时遇到问题。我使用redux-form，当我在SkinList 中更改选择时，它会触发onChange 回调-activeSkinChange 方法

在activeSkinChange 中，调用来自SkinList 的handlSkinChange 属性的handlSkinChange。我需要将选择值传递给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>
    );
  }
}

然后移出 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会触发回调this.onHandlSkinChange，我还需要在 SkinList 道具上的 this.onHandlSkinChange() 中传递另一个参数 activeSkin，但它会遇到错误..

表示onHandlSkinChange方法中需要传入两个参数，一个是选择值(event.target.value)，另一个是activeSkin 在连续回调函数期间，我应该如何让我在回调函数中传递参数？有什么想法吗？

【问题讨论】：

标签： javascript reactjs callback redux react-redux

【解决方案1】：

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

【讨论】：