Question

我目前以下列方式构建我的React Components：

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

现在，在进行了一些研究之后，我还没有找到在Component类中定义可以在某物的onClick属性内使用的函数的任何方法。我发现的所有内容仅用于React.createClass或类似的东西。

Answer 1

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

export default class Heading extends Component {

   changeLanguage(lang){
   }

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

Answer 2

如果函数在渲染器外部，则应按以下方式引用它：

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

changeLangue必须是一个箭头函数，才能维护上下文。

使用ES6语法为React组件中的OnClick定义函数

2 个答案: