React中如何使用onClick事件触发运行指定函数

你当前的代码只需调整2处即可正常运行：

• 统一模块导入导出规范，避免CommonJS和ES Module混用导致导入失效
• 优化onClick事件绑定逻辑，符合React开发最佳实践，也方便后续扩展传参

组件代码修改 #

// 将CommonJS的require导入改为ES Module导入，适配绝大多数React项目环境
import CheckRoutine from '../routines/check-at';

export default ({ className }) => (
  <ul className={ `nav flex-column ${className || ''}` }>
    <li>
      <button className="btn btn-primary" 
        // 用箭头函数包一层函数调用，避免潜在的this指向问题
        onClick={() => CheckRoutine()} >
        <i className="fa fa-refresh"> </i>
        <span>Sync</span>
      </button>
    </li>
  </ul>
);

check-at文件修改建议 #

// 保持CommonJS规范的写法，仅修正日志拼写错误，避免误以为函数未触发
module.exports = atCheck;
function atCheck() {
  console.log("Checking...");
}

// 若要全项目统一使用ES Module规范，可替换为以下写法
// export default function atCheck() {
//   console.log("Checking...");
// }

修改完成后点击Sync按钮，即可在控制台看到对应日志输出，代表函数已正常触发。

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