我有关于在回调函数中传递参数的问题。我使用redux-form
,当我更改SkinList
中的选择时,它会触发onChange
回拨 - activeSkinChange
方法
在activeSkinChange
中,调用来自SkinList handlSkinChange属性的handlSkinChange
。
我需要将select值传递给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道具上的activeSkin
中传递另一个参数this.onHandlSkinChange()
,但它会遇到错误..
这意味着需要在onHandlSkinChange
方法中传递两个参数,一个是选择值(event.target.value),另一个是activeSkin
在连续回调函数中,如何让我在回调函数中传递参数?
有什么想法吗?
答案 0 :(得分: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)}/>
}/>
);
}
}