React TypeScript类组件onClick事件传props及SonarQube问题求助

1. 修正控制器中事件处理函数的传递方式 #

你直接使用{...this.handlechange}是错误的——handlechange是一个函数，不是包含props的对象，直接展开会把函数的内置属性（比如name、length）当作props传递，既达不到传递onClick的目的，还会触发SonarQube的无效props检测。

正确的做法是把事件处理函数包装成包含onClick属性的对象：

import React, { Component } from 'react';

// 定义Button组件接收的props类型
interface ButtonProps {
  value: string;
  onClick?: (event: React.MouseEvent<HTMLButtonElement>) => void;
  children?: React.ReactNode;
}

class Controller extends Component {
  // 用箭头函数自动绑定this，避免指向错误
  handleChange = (event: React.MouseEvent<HTMLButtonElement>) => {
    // 你的事件逻辑
    console.log('触发点击事件，值为:', event.currentTarget.value);
  };

  render() {
    const value = 'demo-value';
    // 包装成标准props对象
    const buttonEventProps = { onClick: this.handleChange };
    return (
      <Button value={value} {...buttonEventProps}>Next</Button>
    );
  }
}

2. 满足SonarQube检测要求 #

SonarQube的报错通常对应以下问题，逐个修正：

• this指向异常：必须确保事件处理函数的this绑定正确，优先用箭头函数定义方法，或者在构造函数中手动绑定：

  constructor(props) {
    super(props);
    this.handleChange = this.handleChange.bind(this);
  }
  
  handleChange(event: React.MouseEvent<HTMLButtonElement>) {
    // 事件逻辑
  }
  

• 无效props传递：禁止直接展开函数（{...this.handlechange}），必须传递明确的props键值对，避免传递函数的内置无用属性。
• 类型不匹配：严格定义props类型，禁止使用any类型，确保onClick的类型符合React鼠标事件处理函数的标准：(event: React.MouseEvent<HTMLButtonElement>) => void。

3. Button组件的类型兼容示例 #

确保Button组件能正确接收并使用传递的props：

// Button组件文件
import React from 'react';

interface ButtonProps {
  value: string;
  onClick?: (event: React.MouseEvent<HTMLButtonElement>) => void;
  children?: React.ReactNode;
}

const Button: React.FC<ButtonProps> = ({ value, onClick, children }) => {
  return (
    <button value={value} onClick={onClick}>
      {children}
    </button>
  );
};

export default Button;

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