javascript React - 你如何从另一个函数内部调用一个函数
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/49350217/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
React - How do you call a function from inside another function
提问by MaxwellLynn
Suppose I had this layout below:
假设我在下面有这个布局：
class Navigation extends React.Component {
primaryFun() { console.log('funn') }
secondaryFun() {
this.primaryFun();
}
}
I'd of expected this to then call primary but instead I get an undefined, Ok.
我原以为这会调用主要的，但我得到了一个未定义的，好的。
So I thought I'd add a constructor to bind the function to this:
所以我想我会添加一个构造函数来将函数绑定到这个：
constructor(props) {
super(props)
this.primaryFun = this.primaryFun.bind(this);
}
but primary fun is still undefined.
但主要乐趣仍未定义。
In my real project I'm calling these on a mouseOut event.
在我的实际项目中，我在 mouseOut 事件上调用这些。
Feels like the above should work and tbh the documentation for React is all over the shot so couldn't find much here.
感觉上面应该可以工作，而且 React 的文档到处都是，所以在这里找不到太多东西。
采纳答案by Harsh Makadia
Are you looking for something like this calling one function inside the other
你在寻找这样的东西在另一个内部调用一个函数吗
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;Here when you click on "Hello world" secondaryFunis called and inside secondaryFun, primaryFunis been triggered
在这里，当你点击“世界，你好” secondaryFun被称为和内部secondaryFun，primaryFun是被触发
回答by Sagar Jajoriya
You also need to bind the secondaryFunfunction to use thisinside that. Without that, the thisinside the function secondaryFunwill refers to the function scope which is secondaryFun
您还需要绑定secondaryFun要this在其中使用的函数。没有那个，this函数内部将指的secondaryFun是函数作用域，它是secondaryFun
回答by Vinicius Dallacqua
Make sure both functions have the correct thisscope. If you are using class properties, see https://babeljs.io/docs/plugins/transform-class-properties/. Which already present on the babel-preset-react-app used by create-react-app, you can use that and write those as arrow functions, as seen on the babel link. And avoid having to use .bindon the constructor.
确保两个函数都具有正确的this作用域。如果您正在使用类属性，请参阅https://babeljs.io/docs/plugins/transform-class-properties/。它已经存在于 create-react-app 使用的 babel-preset-react-app 中，您可以使用它并将其编写为箭头函数，如 babel 链接所示。并避免.bind在构造函数上使用。
回答by gawicks
You need to bind this in your mouseOut
您需要在 mouseOut 中绑定它
onMouseOut={this.secondaryFun.bind(this)}
Or a as best practice use the Lambda syntax. It'll bind this for you
或者作为最佳实践使用 Lambda 语法。它会为你绑定这个
onMouseOut={()=>this.secondaryFun()}
