我有一个返回主页的链接,其中有一个按钮可以从数组中删除一个项目。为了防止链接重定向到主屏幕,只是从数组中删除项目,我需要使用ev.preventDefault()
。
是否可以在ev
方法中不使用箭头函数将render
传递给react方法?从我的研究中,特别是the answer here,似乎以下是唯一的方法。
我担心箭头函数每次都会导致重新渲染,因为每次渲染都会创建新函数。
removeItem(label, e) {
e.preventDefault();
this.props.removeItem(label.id);
}
render () {
const { label } = this.props;
return (
<Link to'/'>
<span>Go Home</span>
<span onClick={(e) => this.removeItem(label, e) }> Click me <span>
</Link>
);
}
答案 0 :(得分:2)
您可以直接删除label参数并从this.props获取标签。像这样重写你的应用程序:
removeItem(ev) {
ev.preventDefault();
this.props.removeItem(this.props.label.id);
}
render () {
const { label } = this.props;
return (
<Link to'/'>
<span>Go Home</span>
<span onClick={this.removeItem}> Click me <span>
</Link>
);
}
这样,React会自动将点击事件传递给您的removeItem
方法。
虽然应该说,在每个渲染上创建一个新函数,可能并不是那么昂贵。
答案 1 :(得分:0)
为了避免重新创建该功能,您可以将参数提取到类道具中。以下是一些examples
例如,这将始终创建一个新函数。
var List = React.createClass({
render() {
return (
<ul>
{this.props.items.map(item =>
<li key={item.id} onClick={this.props.onItemClick.bind(null, item.id)}>
...
</li>
)}
</ul>
);
}
});
现在它不会在重新渲染时重新创建函数。
var List = React.createClass({
render() {
return (
<ul>
{this.props.items.map(item =>
<ListItem key={item.id} item={item} onItemClick={this.props.onItemClick} />
)}
</ul>
);
}
});
var ListItem = React.createClass({
render() {
return (
<li onClick={this._onClick}>
...
</li>
);
},
_onClick() {
this.props.onItemClick(this.props.item.id);
}
});