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使用事件而不使用箭頭功能

回答

相關問題