Javascript 在React中调用函数

我是React的初学者，在React中调用函数有点困惑

我看到了以下几种方法，但我不知道何时使用它们以及使用哪一种

• handleAddTodo={this.handleAddTodo}

• handleAddTodo={this.handleAddTodo（）}

• handleAddTodo={handleAddTodo}

• handleAddTodo={this.handleAddTodo}

• handleAddTodo={handleAddTodo（）}

---

这些可以互换吗？我可以用调用函数的相同方法来处理事件吗？

要调用函数，必须添加（）

关于处理事件-

---

箭头功能-

在ES6中，您可以使用普通功能或箭头功能：

功能1（正常功能）

然后应该调用this.function（）

功能2（箭头功能）

然后应该调用this.function

*功能3（例如：在持续反应中）*

const A = (functionTest) =>{
  return (
     <div>{functionTest}</div>
    );
}

const A=（functionTest）=>{
返回(
{functionTest}
);
}

functionTest是否在React:）中映射StateTrops

---

我希望它能对您有所帮助：）

如果您想调用函数选项2，并且在一些假设条件下，5应该可以工作

如果您想实际将函数作为属性传递给某个子组件，以便它以后可以调用它（比如在某个事件上通知您的根元素），那么选项1（使用预绑定）和3（使用定义变量

const{handleAddTodo}=this

和prebind:）应该可以工作

// 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()} 

这些可以互换吗

简短回答：没有

---

让我们看看您发布的不同片段：

someFunction（）

vs

someFunction

使用前一种语法，实际上是在调用该函数。后者只是对该函数的引用。那我们什么时候用哪一种呢

• 当您希望调用某个函数并立即返回其结果时，可以使用

  someFunction（）

  。在React中，当您将JSX代码的一部分拆分为一个单独的函数时，通常会看到这种情况；出于可读性或可重用性的原因。例如：

  render() {
    myFunction() {
      return <p>Foo Bar</p>;
    }
    return (
      <div>
        {myFunction()}
      </div>
    );
  }
  

  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（）

这与函数的上下文有关。基本上，“这个函数在哪里？”。是当前组件的一部分，然后使用

this.someFunction（）

，它是作为props传入的父组件的一部分，然后使用

this.props.someFunction（）

。如果它是当前方法中的函数，那么只需使用

someFunction（）

显然，还有很多，但这是我能给出的最好的基本总结

---

为了更好地理解，请阅读。这是一个很好的指南，可以指导

this

关键字在Javascript中如何工作，尤其是如何作出反应。

这是正确的->

handleddtodo={this.handleddtodo}

当函数传递给子组件时，您必须像这样绑定函数

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;

从“React”导入React；
类应用程序扩展了React.Component{
建造师（道具）{
超级（道具）；
此.state={
数据：'初始数据…'
}
this.updateState=this.updateState.bind（this）；
};
房地产（）{
this.setState（{data:'data updated…}）
}
render（）{
返回(
点击
{this.state.data}
);
}
}
导出默认应用程序；

子事件

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;

从“React”导入React；
类应用程序扩展了React.Component{
建造师（道具）{
超级（道具）；
此.state={
数据：'初始数据…'
}
this.updateState=this.updateState.bind（this）；
};
房地产（）{
this.setState（{data:'从子组件更新的数据…'））
}
render（）{
返回(
);
}
}
类内容扩展了React.Component{
render（）{
返回(
点击
{this.props.myDataProp}
);
}
}
导出默认应用程序；

---

您可以使用

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;

import React，{Component}来自'React'；
类AddToDo扩展组件{
render（）{
返回(
this.props.handleAddToDo（ev，'hello'）}>
{this.props.title}
)
}
}
类Todos扩展组件{
手持式轮胎（ev，someVal）{
//做点什么
}
render（）{
返回(
this.handleAddToDo（ev，someVal）}/>
)
}
}
导出默认TODO；

是否要从其他组件触发事件？是否确实要调用函数而不是将其作为子组件的属性传递？@YuryTarabanko:是的，我传递了一个函数调用，这是一个子组件的道具，传递一个函数不是隐式地视为调用它吗？@AnynameDonotcare“不是隐式地传递一个函数被认为是在调用它”否。您要么传递一个函数（以便您的子组件稍后可以调用它，也称为“回调”），要么调用它并传递它返回的结果。

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;

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;