Question

我在reactJs中创建了come组件，由2个用于处理每个onClick函数的按钮组成，但是，当我运行代码“未定义myfunction”时，会出现错误。我想在按钮触发时将页面重定向到指定的地址。我的代码有什么问题？

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;

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

2 个答案: