[英]Passing parameter in ReactJS onclick
我有这个React组件,它包含从列表生成的项目(带有map函数)。 每个元素都有一个按钮。 我希望此按钮的onclick按钮传入一个参数,以识别单击了哪个列表项的按钮。
它看起来像这样。
var Component = React.createClass({
assignItem: function(item){
this.setState({item:item})
},
render: function(){
var listItems = list.map(function(item){
return <div>{item}
<button onClick={this.assignItem(item)>Click</button>
</div>
})
return <div>{listItems}</div>
}
})
当然这不起作用。 错误消息表明this.assignItem不是函数。 我知道官方的React文档建议:
var handleClick = function(i, props) {
console.log('You clicked: ' + props.items[i]);
}
function GroceryList(props) {
return (
<div>
{props.items.map(function(item, i) {
return (
<div onClick={handleClick.bind(this, i, props)} key={i}>{item}</div>
);
})}
</div>
);
}
ReactDOM.render(
<GroceryList items={['Apple', 'Banana', 'Cranberry']} />, mountNode
);
但它适用于组件外部的功能。 因为我希望我的函数操作状态,所以我想将它保留在React组件中。
我该怎么做呢?
您可以像React示例一样bind
this
函数,但是由于您要在map
回调中渲染,因此您需要传入thisArg
或使用胖箭头函数:
var Component = React.createClass({
assignItem: function(item){
this.setState({item:item})
},
render: function(){
// bind to this.assignItem
var listItems = list.map(function(item){
return <div>{item}
<button onClick={this.assignItem.bind(this, item)}>Click</button>
</div>
}, this); // pass in this, or use fat arrow map callback
return <div>{listItems}</div>
}
})
这是一个使用旧的React API和相应的旧答案的老问题。 今天你应该使用类或功能React组件API 。 要将参数传递给click处理程序,您只需编写一个内联胖箭头函数,并使用您想要的任何参数调用。 以上示例最终结果如下:
class MyComponent extends React.Component { // or React.PureComponent
assignItem = item => { // bound arrow function handler
this.setState({ item: item });
}
render() {
var listItems = list.map(item => {
// onClick is an arrow function that calls this.assignItem
return <div>{item}
<button onClick={e => this.assignItem(item)}>Click</button>
</div>
});
return <div>{ listItems }</div>
}
}
注意:必须绑定assignItem
处理程序,这是使用箭头函数作为类属性完成的 。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.