Question

因此，我正在构建我的第一个React项目并偶然发现以下问题：在我的App.js（主应用程序）中，我有一个函数并渲染了我的组件：

class App extends Component {
  constructor(props) {
    super(props);
    this.candidateCounter = 0;
    this.setCandidateVote = this.setCandidateVote.bind(this);
  }

 ...

 setCounter (name) {
    this.candidateCounter++;
    console.log(this.candidateCounter);
 }

 render() {
  ...
  <Candidates setCounter={this.setCounter} />
 }
}

子组件Candidates.jsx具有另一个功能，因此调用了另一个组件：

export class Candidates extends React.Component {
  constructor(props) {
    super(props);
    this.AppProps = props;
  }

 ...

  registerVote(name) {
    ...
    this.AppProps.setCounter(name);
  }

 render() {
   ...
   <MyButton id={this.state.candidates[i].name} register={this.registerVote} />
 }

最后一个组件MyButton.jsx如下所示：

export class MyButton extends React.Component {
    constructor(props) {
        super();
        this.ParentProps = props;
        this.state = { active: false }
    }

    buttonActiveHandler = () => {
        this.setState({
            active: !this.state.active
        });
        if (this.state.active === false) {
            this.ParentProps.register(this.ParentProps.id);
        }
        else {
            ...
        }
    }
    render() {
        return (
            <Button content='Click here' toggle active={this.state.active} onClick={this.buttonActiveHandler} />
        );
    }
}

我已成功调试所有函数调用均正常工作，除非孙子MyButton在我的registerVote()模块中触发了Candidates函数时。登录此方法会得到打印，但无法从父级App调用this.AppProps.setCounter()。我收到以下错误：

TypeError：无法读取未定义的属性'setCounter'

我希望这不是太复杂的解释，不胜感激：）

Answer 1

按照@qasimalbaqali在他的评论中所述，将函数简单地绑定到类的构造函数中。

constructor(props) {
    super();
    this.registerVote = this.registerVote.bind(this);
 }

React.js：由孩子触发的父函数调用

1 个答案: