使用 ES6 语法在 React 组件中为 OnClick 定义函数答案

【问题标题】：Define Functions for OnClick in React Component with ES6 Syntax使用 ES6 语法在 React 组件中为 OnClick 定义函数
【发布时间】：2019-07-23 02:29:31
【问题描述】：

我目前的 React 组件结构如下：

export default class Heading extends Component {
    render() {
      return (
        <h1 onClick={changeLanguage("en_US")}>I am a Heading!</h1>
      );
    }
}

现在经过一些研究，我还没有找到任何方法来定义组件类中的函数，这些函数可以在某些东西的 onClick 属性中使用。我发现的一切都只适用于 React.createClass 或类似的东西。

【问题讨论】：

标签： reactjs ecmascript-6

【解决方案1】：

您应该能够在组件内部定义方法。您将需要包装您的事件处理程序，以便您可以将参数传递给它

export default class Heading extends Component {

   changeLanguage(lang){
   }

   render() {
      return (
         <h1 onClick={()=>this.changeLanguage("en_US")}>I am a Heading!</h1>
   )}

【讨论】：

我很愚蠢，把“函数”放在函数之前，VSCode 告诉我这不起作用。但是有了()=>，我什至不再需要函数了。谢谢！

【解决方案2】：

如果函数在渲染之外，你可以这样引用它：

export default class Heading extends Component {
    changeLanguage = () => {
         //do something
    }
    render() {
      return (
        <h1 onClick={()=>this.changeLanguage("en_US")}>I am a Heading!</h1>
      );
    }
}

changeLangue 需要是一个箭头函数来维护上下文。

【讨论】：