点击时的反应不能与箭头功能一起工作

react on click doesn't work with arrow function

本文关键字：功能 一起 工作 不能      更新时间：2023-09-26

下面的代码有问题吗?我试着使用箭头函数，但是什么也没发生。

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、控制台、输出

您的语法不正确。promt() => { ... } 对ES6类无效。要实现箭头函数，必须将其赋值为，作为类属性，如下所示:

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

注意类属性是一个实验特性，在第二阶段，还没有完全实现。根据文档:

Stage-X(实验预设)

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

"对语言的更改是通过一个过程开发的，该过程为从一个想法发展到一个完全指定的功能提供了指导方针"

随时可能更改这些建议可能会更改，因此使用时要格外小心，特别是对于阶段3之前的任何内容

同时，只使用常规的ES6类函数:

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

同时，函数之间没有逗号。另外，使用{ }来引用函数作为处理程序，不要使用字符串。这意味着:

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

是不正确的。将引用用花括号括起来，并去掉圆括号，因为您需要的是函数引用，而不是调用:

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

应该传递引用，而不是调用的结果:

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'));
相关文章：