我如何在功能组件中调用函数 - ReactJs答案

【问题标题】：How do i call function in functional component - ReactJs我如何在功能组件中调用函数 - ReactJs
【发布时间】：2021-03-22 03:27:30
【问题描述】：

如何在功能组件中调用函数，请查看下面的代码sn-p

import React from 'react';
 
const Users = () => {
  const greeting = 'Hello Function Component!';

  onUpdate = (name, age) => event =>  {
    // .....
  }

  onUserChange = (name, id) => {
   // Here i want to call the function onUpdate(name, age)
  }
 
  return (
      <select onChange={onUserChange}>
       // .....
      </select>
  );
};
 
export default Users;

请建议我在 reactjs 功能组件中调用 onUpdate(name, age) 函数。

【问题讨论】：

就像你在 JS 中调用任何函数一样。 onUpdate(...);。但请在函数之前添加 const 以避免创建全局变量。

标签： javascript reactjs

【解决方案1】：

就像@Gabriele 在 cmets 中所说的那样

import React from 'react';
 
const Users = () => {
  const greeting = 'Hello Function Component!';  
  
  // Added const to avoid redeclaration or reassignment of any function
  const onUpdate = (name, age) => event =>  {
    // .....
  }

  const onUserChange = (name, id) => {
     onUpdate(name, age)
  }
 
  return (
      <select onChange={onUserChange}>
       // .....
      </select>
  );
};
 
export default Users;

【讨论】：

【解决方案2】：

记住语法：

{函数名称（参数）}

就是这样，但这里有一点转折。上面的调用只是你有一些代码会调用这个函数。

但是如果您希望您的函数在屏幕呈现后立即被自己调用，您必须在最后使用 ( )。

语法：{funcName( )} 空括号对将在行执行后立即调用它。

【讨论】：