Question

假设我在下面有这个布局：

class Navigation extends React.Component {
 primaryFun() { console.log('funn') }

 secondaryFun() {
  this.primaryFun();
 }
}

我预计这会调用primary，但我得到一个未定义的，好的。

所以我想我会添加一个构造函数来将函数绑定到：

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

但主要乐趣仍未定义。

在我的真实项目中，我在mouseOut事件中调用它们。

像上面这样的感觉应该有效，而且React的文档已经全部用完，所以在这里找不到多少。

Answer 1

您还需要绑定secondaryFun函数以在其中使用this。如果没有这个，函数this内的secondaryFun将引用函数范围secondaryFun

Answer 2

你是否正在寻找这样的东西，在另一个内部调用一个函数

import React, { Component } from 'react';
import './App.css'

class App extends Component {
  constructor(){
    super()
    this.mouseClick = this.mouseClick.bind(this);
    this.primaryFun = this.primaryFun.bind(this);
    this.secondaryFun = this.secondaryFun.bind(this);
  }

  primaryFun(){
    console.log('primaryFun funn') 
  }

  secondaryFun(){
    console.log('secondaryFun funn') 
    this.primaryFun()
  }

  mouseClick(){
    this.secondaryFun()
  }

  render() {
    return (
      <div onClick={this.mouseClick}>   
      Hello World!
      </div>
    );
  }
}
export default App;

当您点击“Hello world” secondaryFun 并且 secondaryFun 内， primaryFun 被触发时

Answer 3

确保两个函数都具有正确的this范围。如果您使用的是类属性，请参阅https://babeljs.io/docs/plugins/transform-class-properties/。已经出现在create-react-app使用的babel-preset-react-app上，您可以使用它并将其写为箭头函数，如babel链接所示。并且避免在构造函数上使用.bind。

Answer 4

您需要在mouseOut

中绑定它

onMouseOut={this.secondaryFun.bind(this)}

或者最佳实践使用Lambda语法。它会为你绑定

onMouseOut={()=>this.secondaryFun()}

Answer 5

必须同时绑定两个函数。您应该这样做：

class Navigation extends React.Component {

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

    primaryFun() {
        console.log('funn')
    }

    secondaryFun() {
        this.primaryFun();
    }
}

React - 如何从另一个函数内部调用函数

5 个答案: