React中如何在一个onClick事件中调用多个函数？

你的问题在于当前代码里的随机数是组件首次渲染时计算的，之后不会自动更新——因为没有触发组件重新渲染的机制。要实现点击按钮重新生成随机数，需要用React的状态管理来保存这些值，通过更新状态触发组件重新渲染，同时重新调用函数生成新值。

修改后的代码如下：

import { useState } from 'react';

export default function App(){
  // 定义生成随机数的函数
  const func1 = () => {
    // 示例：生成0-99的随机数，可替换为你的业务逻辑
    return Math.floor(Math.random() * 100);
  };

  const func2 = () => {
    return Math.floor(Math.random() * 100);
  };

  const func3 = () => {
    return Math.floor(Math.random() * 100);
  };

  // 用useState保存随机数状态，初始值调用函数生成
  const [randomNums, setRandomNums] = useState({
    one: func1(),
    two: func2(),
    three: func3()
  });

  // 点击按钮时的处理函数：重新调用所有函数，更新状态
  const handleRefresh = () => {
    setRandomNums({
      one: func1(),
      two: func2(),
      three: func3()
    });
  };

  return(
    <div>
      <div>{randomNums.one}</div>
      <div>{randomNums.two}</div>
      <div>{randomNums.three}</div>
      <button onClick={handleRefresh}>Run Functions Again</button>
    </div>
  );
}

关键改动说明： #

• 引入useState钩子：用来管理组件内的状态，状态更新时会自动触发组件重新渲染。
• 状态初始化：首次渲染时调用三个函数，把结果存入状态对象。
• 点击事件处理函数handleRefresh：点击按钮时重新调用所有函数，生成新的随机数并更新状态。
• 渲染时使用状态值：组件重新渲染时会读取最新的状态值，展示新的随机数。

如果你的每个函数逻辑独立，也可以分开维护三个独立状态（比如[num1, setNum1]、[num2, setNum2]），点击时分别更新，效果一致。

内容的提问来源于stack exchange，提问作者Tornike Pirtakhia