單擊時反應不適用於箭頭功能

Question

我的以下代碼有問題嗎？ 我嘗試使用箭頭功能，但沒有任何反應。

class App extends React.Component {
  promt() => {
    alert('trigger prompt!');
  },
  render(){
      return(
    <h1 onClick="this.promt()">Hello world</h1>
    )        
  }
}

ReactDOM.render(<App />,document.getElementById('app-container'));

https://jsbin.com/nisetupaqa/edit?html,js，控制台，輸出

Answer 1

您應該傳遞參考，而不是調用結果：

onClick={this.promt}

它調用一次，然后在處理程序中未定義。

promt() => {
   alert('trigger prompt!');
},

改成：

promt() {
  alert('trigger prompt!');
}

您無需放置箭頭和逗號。 另外，您可以在jsbin頁面上的控制台中查找它。

完整代碼：

class App extends React.Component {
    promt() {
        alert('trigger prompt!');
    }

    render(){
        return(
            <h1 onClick={this.promt}>Hello world</h1>
        )


  }
}

ReactDOM.render(<App />,document.getElementById('app-container'));

Answer 2

您有一些不正確的語法。 promt() => { ... }對ES6類無效 。 要實現箭頭功能，必須將它分配為類屬性，如下所示：

promt = () => {
    alert("trigger prompt");
}

請注意，類屬性是Stage-2中的一項實驗功能 ，尚未完全實現。 根據文檔：

X階段（實驗預設）

x階段預設中的任何轉換都是對語言的更改，這些更改尚未被批准包含在Javascript版本中（例如ES6 / ES2015）。

“對語言的更改是通過一個過程開發的，該過程提供了從概念到完全指定的功能的擴展指南”

隨時更改這些建議可能隨時更改，因此使用時要格外謹慎，尤其是對於第3階段之前的任何內容。

同時，只需使用常規的ES6類函數：

promt() {
    alert("trigger prompt");
}

此外，函數之間沒有逗號。 另外，使用{ }引用函數作為處理程序，不要使用字符串。 這意味着：

<h1 onClick="this.promt()">Hello world</h1>

是不正確的。 用大括號將引用包裹起來，並刪除括號，因為您需要一個函數引用 ，而不是調用：

<h1 onClick={this.promt}>Hello world</h1> 

這是工作的小提琴 。