Question

我试图在按钮单击时调用两个函数。但这每次都给我错误，指出未定义'func1'和'func2'。另外，我从子组件中调用了在Parent组件中存在的方法，但是它给我一个错误，指出“预期分配或函数调用，而是看到了一个表达式”。

我试图在单击按钮时调用一个函数，该函数有两个函数需要调用，但仍然有问题。

这是我的父组件代码：

class App extends React.Component{
updateCount = () => {
        count++;
        this.setState({counter: count})
    }

return (
                            <CardComponent
                                handle={allData.handle}
                                avatar={allData.avatar}
                                source={allData.source}
                                content={allData.content}
                                timestamp={this.getDate(allData.timestamp)}
                                meta={allData.meta} 
                                triggerParentUpdate={this.updateCount} 
                                btnMessage={btnMessage}
                                btnColor={btnColor}
                            />
                        );
}

这是我的子组件代码

class CardComponent extends React.Component{
onClick(event){
  func1();
  func2();
}

func1(){
  {this.props.triggerParentUpdate};
}
func2(){
   console.log("Hello World...");
}

render(){
   return(
      <button onClick={this.onClick} type="button"}></button>
   );
}
}

我不知道我在做什么错，但是当单击一个按钮时，它应该调用这两个函数。同样，当调用func1（）函数时，它也应该调用父组件中存在的函数。

Answer 1

您可以将onClick方法转换为箭头函数，并通过func1调用func1和this；

onClick = event => {
    this.func1();
    this.func2();
}

有关CardComponent外观的更完整示例：

class CardComponent extends React.Component{
    onClick = event => {
        this.func1();
        this.func2();
    }
    func1 = () => {
        this.props.triggerParentUpdate();
    }
    func2() {
        console.log("Hello World...");
    }
    render() {
        return (
            <button onClick={this.onClick} type="button">Click Me</button>
        );
    }
}

Answer 2

您需要做一些修改代码的事情：

将“卡片”组件更改为：

import React from 'react'

export default class Card extends React.Component {
  onClick(event) {
    this.func1();
    this.func2();
  }

  func1() {
    this.props.triggerParentUpdate
  }

  func2() {
    console.log("Hello World...");
  }

  render() {
    return (
      <button onClick={this.onClick} type="button">CLick</button>
    )
  }
}

由于您正在通过onClick方法访问此方法，因此需要绑定该方法。查看更改：

import React from 'react'

export default class Card extends React.Component {
  onClick(event) {
    this.func1();
    this.func2();
  }

  func1() {
    this.props.triggerParentUpdate();
  }

  func2() {
    console.log("Hello World...");
  }

  render() {
    return (
      <button onClick={(event) => this.onClick(event)} type="button">CLick</button>
    )
  }
}

函数未定义（多个函数调用）-React

2 个答案: