"Function is not defined“onClick function in a component in ReactJs？

Question

我已经在reactJs中创建了come组件，由两个按钮组成，它们处理每个onClick函数，但当我运行代码"myfunction is not defined“时，出现错误。我想在按钮触发时将页面重定向到指定的地址。我的代码出了什么问题？

import React, { Component } from 'react';
import { Link } from 'react-router-dom';

class MainMenu extends React.Component {
  constructor(props){
    super(props);
    this.slotClick = this.slotClick.bind(this);
    this.freqClick = this.freqClick.bind(this);
  }
   slotClick = (e) => {
    e.preventDefault();    
  }
   freqClick = (e) => {
    e.preventDefault();
  }
  render() {
    return (
      <div>   
        <input type="button" value="By Time Slot" onClick={ slotClick } />
        <input type="button" value="By Frequency" onClick={ freqClick } />
      </div>
    )
  }
}

export default MainMenu;

Answer 1

您需要从this访问这些函数。你也不需要bind()，因为这些函数都是箭头函数。

render() {
    return (
      <div>   
        <input type="button" value="By Time Slot" onClick={ this.slotClick } />
        <input type="button" value="By Frequency" onClick={ this.freqClick } />
      </div>
    )
  }

Answer 2

您需要在class component中使用this。

当我们使用arrow function时，我们不需要绑定函数

import React, { Component } from 'react';
import { Link } from 'react-router-dom';

class MainMenu extends React.Component {
  constructor(props){
    super(props);
  }
   slotClick = e => {
    e.preventDefault();    
  }
   freqClick = e => {
    e.preventDefault();
  }
  render() {
    return (
      <div>   
        <input type="button" value="By Time Slot" onClick={this.slotClick()} />
        <input type="button" value="By Frequency" onClick={this.freqClick()} />
      </div>
    )
  }
}

export default MainMenu;