函数在 JSX 类组件中的什么位置？

Question

我试图将此函数放在我的 React 类组件中，以确保按钮正常工作。 但是我很难弄清楚函数应该去哪里。

import React, { Component } from "react";
import SUBJECT from "./subject";
import GENRE from "./genre";

class Main extends Component {
  constructor(props) {
    super(props);
    this.state = {
      subject: SUBJECT,
      genre: GENRE
    };
    
    function tester () { 
      alert('the button works'); 
  }

  render() {
    return <button onlick='tester'()>Click me</button>;
  }
}

Answer 1

您可以像这样将函数放在 react 类组件中。

    tester = () => { 
       alert('the button works'); 
    }

    render() {
    return (
         <button onlick={this.tester}>Click me</button>
       );      
    }

Answer 2

您可以这样做，并从此处阅读有关处理事件的模式处理事件

test() {
  alert("the button works");
} 
render() {
  return <button onClick={this.test}>Click me</button>;
}