在ReactJs中内联到组件的“未定义函数” onClick函数吗？

Question

我在reactJs中创建了come组件，由2个按钮处理每个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

您需要this在内使用class component。

当我们使用时，我们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;