如何在React无状态组件的按钮点击事件中调用指定函数？

当然有办法实现！你完全可以把这段点击逻辑抽成单独的函数变量，既符合无状态组件的写法规范，又能让JSX代码更整洁。下面给你两种常用的实现方式：

方式1：直接定义箭头函数变量 #

在组件内部用const声明一个箭头函数，把你的逻辑放进去，然后在onClick里直接引用这个函数即可：

function Option(props) {
  // 把点击逻辑抽成单独的函数变量
  const handleRemove = (e) => {
    props.handleDelete(props.optionText);
  };

  return (
    <div>
      <div>
        <p>{props.optionText}</p>
        <button onClick={handleRemove}> Remove Item </button>
      </div>
    </div>
  )
}

这里要说明的是：我们常说“不要在无状态组件内部定义方法”，其实指的是不要用function关键字声明类式的方法（比如function handleRemove() {}），而用const声明箭头函数/函数表达式是完全合规的，不会有问题。

方式2：用useCallback优化（React 16.8+） #

如果你的项目使用React 16.8及以上版本，还可以用useCallback Hook来缓存函数，避免每次组件渲染都生成新的函数实例（虽然大多数普通场景下这个性能影响可以忽略，但在有性能优化需求时很有用）：

import { useCallback } from 'react';

function Option(props) {
  // 缓存函数，只有依赖项变化时才重新创建
  const handleRemove = useCallback((e) => {
    props.handleDelete(props.optionText);
  }, [props.handleDelete, props.optionText]);

  return (
    <div>
      <div>
        <p>{props.optionText}</p>
        <button onClick={handleRemove}> Remove Item </button>
      </div>
    </div>
  )
}

这里的依赖数组[props.handleDelete, props.optionText]告诉React：只有当这两个值发生变化时，才重新生成handleRemove函数，否则复用之前的实例。

不管用哪种方式，你都可以在onClick里直接引用抽离后的函数，不需要再额外包裹一层箭头函数啦。

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