我是React的初学者，我对在React中调用函数感到困惑。
我看到了以下几种方式，我不知道何时使用以及使用哪种方式。
handleAddTodo ={this.handleAddTodo} handleAddTodo ={this.handleAddTodo()} handleAddTodo ={handleAddTodo} handleAddTodo ={this.handleAddTodo} handleAddTodo ={handleAddTodo()} 这些可以互换吗？我可以这样做来处理事件，就像调用函数一样吗？
答案 0 :(得分：3)
如果你想调用一个功能选项2并且有一些假设5应该有效。
如果你想将一个函数传递作为某个子组件的属性，以便以后可以调用它（比如在某个事件上通知你的根元素），那么选项1（带有预绑定）和3（定义变量const {handleAddTodo} = this和预绑定:)）应该工作
// this works if handleAddTodo was prebinded or doesn't use this
handleAddTodo ={this.handleAddTodo}
// this probably wont work unless handleAddTodo is higher order function that returns another function
handleAddTodo ={this.handleAddTodo()}
// This wont work unless you have a var/let/const that is referencing a function
handleAddTodo ={handleAddTodo}
// Same as 1
handleAddTodo ={this.handleAddTodo}
// 3 and 2 combined
handleAddTodo ={handleAddTodo()}
答案 1 :(得分：2)
这些可以互换吗？
简短回答：不。
让我们来看看你发布的不同片段：
someFunction() vs someFunction 使用以前的语法，您实际上是在调用该函数。后者只是对该功能的参考。那么我们什么时候使用哪个？
如果希望调用该函数并立即返回其结果，则可以使用someFunction()。在React中，当您将部分JSX代码拆分为单独的函数时，通常会出现这种情况。出于可读性或可重用性的原因。例如：
render() {
myFunction() {
return <p>Foo Bar</p>;
}
return (
<div>
{myFunction()}
</div>
);
}
当您只想将对该函数的引用传递给其他内容时，可以使用someFunction。在React中，这通常是一个事件处理程序，它通过props传递给另一个子组件，以便该组件可以在需要时调用事件处理程序。例如：
class myApp extends React.Component {
doSomething() {
console.log("button clicked!");
}
render() {
return (
<div>
<Button someFunction={this.doSomething} />
</div>
);
}
}
class Button extends React.Component {
render() {
return (
<button onClick={this.props.someFunction}>Click me</button>
);
}
}
someFunction() vs this.someFunction() 这与函数的上下文有关。基本上，“这个功能在哪里？”。是当前Component的一部分，然后使用this.someFunction()，它是作为props传入的父Component的一部分，然后使用this.props.someFunction()。它是当前方法中的函数，然后只使用someFunction()。
显然，它还有很多，但这是我能给出的最好的基本总结。
为了更好地理解，请阅读here。它是this关键字在Javascript和React中的工作原理的一个很好的指南。
答案 2 :(得分：1)
答案 3 :(得分：1)
在ES6中，您可以使用普通功能或箭头功能：
功能1（正常功能）
functionA(){
//Something here
}
然后应该调用 this.functionA（）
功能2（ArrowFunction）
functionA = () => {
//SomeThing Here
}
然后应该调用 this.functionA
* Function3（例如：在React的const中）*
const A = (functionTest) =>{
return (
<div>{functionTest}</div>
);
}
functionTest 是React中的mapStateToProps：）
我希望它对你有所帮助:)。
答案 4 :(得分：1)
这是正确的 - ＆gt; handleAddTodo ={this.handleAddTodo}
当函数传递给子组件时，你必须像这样handleAddTodo ={this.handleAddTodo.bind(this)}绑定你的函数。下面的代码可以帮助你解决疑问。
简单示例
import React from 'react';
class App extends React.Component {
constructor(props) {
super(props);
this.state = {
data: 'Initial data...'
}
this.updateState = this.updateState.bind(this);
};
updateState() {
this.setState({data: 'Data updated...'})
}
render() {
return (
<div>
<button onClick = {this.updateState}>CLICK</button>
<h4>{this.state.data}</h4>
</div>
);
}
}
export default App;
儿童活动
import React from 'react';
class App extends React.Component {
constructor(props) {
super(props);
this.state = {
data: 'Initial data...'
}
this.updateState = this.updateState.bind(this);
};
updateState() {
this.setState({data: 'Data updated from the child component...'})
}
render() {
return (
<div>
<Content myDataProp = {this.state.data}
updateStateProp = {this.updateState}></Content>
</div>
);
}
}
class Content extends React.Component {
render() {
return (
<div>
<button onClick = {this.props.updateStateProp.bind(this)}>CLICK</button>
<h3>{this.props.myDataProp}</h3>
</div>
);
}
}
export default App;
答案 5 :(得分：1)
您可以使用this.props.someProps()触发事件。请检查以下示例。
import React, { Component } from 'react';
class AddToDo extends Component {
render() {
return (
<button onClick={ev => this.props.handleAddToDo(ev, 'hello')}>
{this.props.title}
</button>
)
}
}
class Todos extends Component {
handleAddToDo(ev, someVal) {
// do something
}
render() {
return (
<AddToDo title="Add" handleAddToDo={(ev, someVal) => this.handleAddToDo(ev, someVal)} />
)
}
}
export default Todos;