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,console,output

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

您的语法不正确。 ES6类的promt = () => { alert("trigger prompt"); } 无效。要实现箭头功能，您必须将其分配，作为类属性，如下所示：

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

请注意，an experiment feature中的类属性为stage-2，尚未完全实现。根据文件：

Stage-X（实验预设）

stage-x预设中的任何变换都是对未被批准成为Javascript版本一部分的语言的更改（例如ES6 / ES2015）。

“语言的变化是通过一个过程开发的，该过程提供了从创意到完全指定的特征的添加指南”

可能会有变化这些提案可能会发生变化，因此请谨慎使用，尤其是对于任何前期阶段的任何内容。

与此同时，只需使用常规的ES6类函数：

{ }

此外，函数之间没有逗号。另外，使用<h1 onClick="this.promt()">Hello world</h1>引用函数作为处理程序，不要使用字符串。这意味着：

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

不正确。用花括号包装引用，并删除括号，因为你需要一个函数 reference ，而不是调用：

for (childnode in xml.output.rows.row)

这里有fiddle正在运作。

对点击做出反应并不适用于箭头功能

2 个答案: