面试题：React中如何为按钮绑定点击事件处理函数并传递参数

Question

在React项目中，有一个按钮组件，要求为其绑定点击事件处理函数，并且点击时能传递一个自定义的字符串参数。请写出实现此功能的代码示例，并简要说明原理。

Answer 1

代码示例

import React, { useState } from 'react';

const ButtonComponent = () => {
  const handleClick = (param) => {
    console.log(`点击按钮，传递的参数为: ${param}`);
  };

  return (
    <button onClick={() => handleClick('自定义字符串')}>
      点击我
    </button>
  );
};

export default ButtonComponent;

原理说明

1. 定义点击处理函数：在组件内部定义了handleClick函数，该函数接受一个参数param，用于处理按钮点击后的逻辑，这里只是简单地在控制台打印传递的参数。
2. 绑定点击事件：在<button>标签中，通过onClick属性绑定了一个匿名函数() => handleClick('自定义字符串')。当按钮被点击时，这个匿名函数会被触发，进而调用handleClick函数，并将'自定义字符串'作为参数传递进去，从而实现了点击按钮传递自定义字符串参数的功能。