react - onclick使用事件而不使用箭头功能

我有一个链接返回家里，并有一个按钮，从数组中删除项目。为了防止链接重定向到主屏幕并从阵列中删除项目，我需要使用ev.preventDefault()。react - onclick使用事件而不使用箭头功能

是否可以将ev传递给反应方法而不使用render方法中的箭头函数？从我的研究，特别是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> 
    ); 
}

来源

2017-02-10 peter flanagan

您可以删除标签参数，直接从this.props中获取'label'。然后，你可以只是'onClick = {this.removeItem}' –

尽管在每个渲染上创建一个新函数可能并不是那么昂贵:) –

好点，但是我仍然可以使用'e.preventDefault '？ –

你可以只取出标签参数并直接得到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> 
    ); 
}

这样一来，会做出反应自动点击事件传递给你removeItem方法。

虽然，应该说，在每个渲染上创建一个新函数，可能并不是那么昂贵。

来源

2017-02-10 16:07:11

为了避免重新创建函数，您可以将参数提取到类道具中。这里有一些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); 
    } 
});

下面是一些SO解释React js onClick can't pass value to method

来源

2017-02-10 15:45:04

react - onclick使用事件而不使用箭头功能

回答

相关问题