HREF用的onClick在ReactJS

按Reactjs.org來處理事件，並防止下面的代碼默認使用：HREF用的onClick在ReactJS

function ActionLink() { 
 
    function handleClick(e) { 
 
    e.preventDefault(); 
 
    console.log('The link was clicked.'); 
 
    } 
 
    return (
 
    <a href="#" onClick={handleClick}> 
 
     Click me 
 
    </a> 
 
); 
 
}

然而，這也需要增加在結合構造，如：

this.handleClick = this.handleClick.bind(this);

我能夠通過以下代碼獲得所需的行爲：

<span> 
 
<a href="#" 
 
onClick={()=>doSomething(arg1,agr2)}>Click here</a></span>

問題：哪一個是更好的選擇？看起來第一個需要使用有狀態組件，第二個選項可以完成這些事情，而不管組件是有狀態的還是無狀態的。

來源

2017-03-22 TechTurtle

第二具有類似於做一個缺陷'的onClick = {this.handleClick.bind（本）}'在第一，在每個渲染器上創建一個新函數。 –

這兩個選項都產生幾乎相同的結果。由於ActionLink是無狀態組件，因此將重新創建並重新分配onClick。如果要獲得最佳性能，可以使用類，如下所示：

class ActionLink extends React.Component() { 
    handleClick = (e) => { 
    e.preventDefault(); 
    console.log('The link was clicked.'); 
    }; 

    render() { 
    return (
     <a href="#" onClick={handleClick}> 
     Click me 
     </a> 
    ); 
    } 
}

在此示例中。僅被綁定一次，只會執行渲染方法。如果您願意，也可以在構造函數中綁定。但差異很小，我建議你使用你喜歡的，你會發現更清晰。

來源

2017-03-23 00:00:26

有一個輕微的性能問題---第二個---這兩個片段。每次渲染<a>標籤時，onClick中的功能將被重新分配。

這裏是一個詳細的文章，概述了反應中綁定this的所有方法。（https://medium.com/@housecor/react-binding-patterns-5-approaches-for-handling-this-92c651b5af56#.53op90a6w）

編輯。我誤解了示例代碼，它將每個渲染器上的函數分配爲內聯箭頭函數代碼片段的問題相同。請參閱Vincent D'amour的接受答案。

來源

2017-03-22 21:11:01 marcusmolchany

固定在頁加載該重複函數調用的最好的方法是做

<a href="#" onClick={() => {this.handleClick}}>click me</a>

來源

2018-01-19 10:58:43

HREF用的onClick在ReactJS

回答

相關問題