当前位置:  首页>> 技术小册>> ReactJS面试指南

答案:
React 中的事件处理方式有两种:直接绑定事件处理函数和使用事件代理。直接绑定事件处理函数指的是在组件中定义一个事件处理函数,并将它绑定到某个 DOM 元素的事件上,例如:

  1. class MyComponent extends React.Component {
  2. handleClick() {
  3. console.log('Button clicked');
  4. }
  5. render() {
  6. return <button onClick={this.handleClick}>Click me</button>;
  7. }
  8. }

使用事件代理则是通过在组件的祖先元素上绑定事件处理函数,然后通过事件对象中的 target 属性来确定触发事件的具体元素,并根据元素的属性或状态来执行相应的操作。例如:

  1. class MyComponent extends React.Component {
  2. handleClick(event) {
  3. if (event.target.tagName === 'BUTTON') {
  4. console.log('Button clicked');
  5. }
  6. }
  7. render() {
  8. return <div onClick={this.handleClick}><button>Click me</button></div>;
  9. }
  10. }

这两种事件处理方式都可以在 React 中使用,具体使用哪种方式取决于具体的需求和场景。


该分类下的相关小册推荐: