React 基础面试题, 如何在 React 中创建一个事件?请举例说明

Step 1

Q:: 如何在 React 中创建一个事件？请举例说明。

A:: 在 React 中，事件处理程序的定义方式类似于在普通的 HTML 中使用 JavaScript 的方式。但是，与传统 DOM 事件处理不同，React 事件使用驼峰式命名规则。例如，'onclick' 在 React 中变为 'onClick'。此外，React 事件处理程序通常是一个函数引用而不是一个字符串。以下是一个简单的例子：

 
function MyButton() {
  function handleClick() {
    alert('Button was clicked!');
  }
  return (
    <button onClick={handleClick}>
      Click me
    </button>
  );
}
 

在这个例子中，按钮被点击时，handleClick 函数会被触发。

Step 2

Q:: React 中的合成事件是什么？为什么要使用合成事件？

A:: React 中的合成事件 (SyntheticEvent) 是对原生 DOM 事件的封装。它可以跨浏览器处理事件，使其在不同浏览器中表现一致。合成事件提供了与原生事件相同的接口，并且会自动处理事件的兼容性问题。这种统一的事件处理方式提高了代码的可移植性和一致性，同时避免了内存泄漏问题，因为 React 会在事件队列中复用事件对象。

Step 3

Q:: 如何在 React 中阻止事件冒泡？

A:: 在 React 中，可以使用 event.stopPropagation() 方法来阻止事件冒泡。合成事件的 stopPropagation 方法与原生事件的 stopPropagation 方法行为相同。

示例：

 
function MyComponent() {
  function handleClick(e) {
    e.stopPropagation();
    console.log('Button clicked!');
  }
  return (
    <div onClick={() => console.log('Div clicked!')}>
      <button onClick={handleClick}>
        Click me
      </button>
    </div>
  );
}
 

在这个例子中，点击按钮时，只会触发按钮的点击事件，而不会触发父 div 的点击事件。

Step 4

Q:: 在 React 中，如何通过事件传递参数？

A:: 在 React 中，可以通过箭头函数或者 bind 方法向事件处理函数传递参数。

示例：

 
function MyButton(props) {
  function handleClick(id, event) {
    console.log('Button ID:', id);
    console.log('Event:', event);
  }
  return (
    <button onClick={(e) => handleClick(props.id, e)}>
      Click me
    </button>
  );
}
 

在这个例子中，通过箭头函数的形式，将 props.id 作为参数传递给 handleClick 函数。