如何獲取箭頭功能？

Question

讓我周圍ES6頭，想知道如何創建一個箭頭功能，您可以調試：

<button onClick={() => this.setState({open: !open})}>Toggle</button> 

我如何可以把一個在的console.log這裏看這是否已被觸發與否？

Answer 1

使用大括號{}爲一個箭頭函數，它將有一個代碼塊。

<button onClick={() => {console.log('hello');this.setState({open: !open})}}>Toggle</button> 

格式化

<button onClick={() => { 
     console.log('hello'); 
     this.setState({open: !open}) 
    }}> 
     Toggle 
    </button> 

希望這有助於！

Answer 2

那麼你可以把它稱之爲一個單獨的函數，它console.logs並設置狀態：

<button onClick={this.potato}>Toggle</button> 

function potato() { 
    console.log('bombs away'); 
    this.setState({open: !open}) 
} 

或者你可以把打印語句在渲染功能，因爲每當你更新狀態時，它會觸發重新渲染

Answer 3

您的代碼無效HTML。在onClick屬性的值必須是一個字符串，所以它應該是

<button onClick="() => this.setState({open: !open})">Toggle</button> 

然而，這也不會做任何事情，因爲僅僅是在執行一個函數聲明不會做任何事情。你可能只是想

<button onClick="this.setState({open: !open})">Toggle</button> 

現在這是很容易在console.log堅持：

<button onClick="console.log("here!"); this.setState({open: !open})">Toggle</button> 

當然，你不宜反正這樣做事。您應該使用addEventListener來設置事件處理程序。所以它可能是

const handler =() => this.setState({open: !open}); 
button.addEventListener('click', handler); 

如果你想一個的console.log添加到handler，在另一個答覆中提到，您可以放棄簡明體形式（無大括號）：

const handler =() => { console.log("here"); this.setState({open: !open}); }; 

或者，雖然不是通常建議，你可以用逗號：

const handler =() => (console.log("here"), this.setState({open: !open})); 

下面的語句也出頭有用：

const handler =() => console.log("here") || this.setState({open: !open}); 

這是因爲console.log返回undefined。這樣，您可以通過簡單地刪除字符console.log("here") ||來刪除日誌，而不用擔心修復大括號和parens。