如何在单个onClick处理器中调用两函数及子组件点击禁用问题

嘿，我来帮你把这个问题理清楚～

先解决你提取函数后this.props.onClick执行异常的问题 #

你遇到的问题大概率是类组件里的上下文绑定问题，或者没处理onClick可能为undefined的情况。咱们分组件类型来看：

类组件场景 #

如果你的子组件是类组件，提取的点击处理函数如果没正确绑定this，就会导致this.props指向错误。正确的写法应该是用箭头函数定义处理函数（自动绑定this），或者在构造函数里手动绑定：

class CustomButton extends React.Component {
  constructor(props) {
    super(props);
    this.state = { disabled: false };
    // 手动绑定this（如果不用箭头函数的话）
    // this.handleClick = this.handleClick.bind(this);
  }

  // 箭头函数自动绑定this，推荐写法
  handleClick = (e) => {
    // 先执行禁用逻辑
    this.setState({ disabled: true });
    // 执行父组件传的onClick，用可选链避免未定义时报错
    this.props.onClick?.(e);
  };

  render() {
    return (
      <button 
        onClick={this.handleClick} 
        disabled={this.state.disabled}
      >
        点击触发
      </button>
    );
  }
}

函数组件场景 #

函数组件里不存在this的问题，但同样要注意处理onClick可能未传入的情况：

import { useState } from 'react';

const CustomButton = ({ onClick }) => {
  const [disabled, setDisabled] = useState(false);

  const handleClick = (e) => {
    setDisabled(true);
    // 执行父组件的点击逻辑
    onClick?.(e);
  };

  return (
    <button 
      onClick={handleClick} 
      disabled={disabled}
    >
      点击触发
    </button>
  );
};

能不能不用单独函数实现需求？ #

当然可以！你可以直接在onClick属性里写箭头函数，把禁用逻辑和父组件的onClick放在一起执行。不过要注意：这种写法每次组件render时都会创建新的函数，简单场景下没问题，但复杂组件可能有性能影响：

类组件版本 #

render() {
  return (
    <button
      onClick={(e) => {
        this.setState({ disabled: true });
        this.props.onClick?.(e);
      }}
      disabled={this.state.disabled}
    >
      点击触发
    </button>
  );
}

函数组件版本 #

const CustomButton = ({ onClick }) => {
  const [disabled, setDisabled] = useState(false);

  return (
    <button
      onClick={(e) => {
        setDisabled(true);
        onClick?.(e);
      }}
      disabled={disabled}
    >
      点击触发
    </button>
  );
};

如何在一个onClick处理器中调用两个函数？ #

其实很简单——在同一个处理函数里依次调用多个函数就行，记得处理函数可能未定义的情况（用可选链?.避免报错）：

基础写法 #

const handleClick = (e) => {
  // 第一个函数：组件内部的禁用逻辑
  setDisabled(true);
  // 第二个函数：父组件传入的onClick
  onClick?.(e);
  // 还可以加更多函数...
  logClickEvent();
};

如果是多个外部传入的函数 #

如果需要调用多个父组件传过来的函数，同样依次执行即可：

const CustomButton = ({ onClick, onAfterClick }) => {
  const [disabled, setDisabled] = useState(false);

  const handleClick = (e) => {
    setDisabled(true);
    onClick?.(e);
    onAfterClick?.(e);
  };

  return <button onClick={handleClick} disabled={disabled}>点击</button>;
};

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