单击时反应不适用于箭头功能

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> 

这是工作的小提琴 。