当前位置：首页 > React

react点击事件如何使用

2026-03-10 15:57:46React

React 点击事件基础用法

在 React 中，点击事件通过 onClick 属性绑定，事件处理函数需定义为组件的方法或函数组件内的函数。类组件和函数组件的写法略有差异。

类组件示例：

class Button extends React.Component {
  handleClick() {
    console.log('按钮被点击');
  }

  render() {
    return <button onClick={this.handleClick}>点击我</button>;
  }
}

函数组件示例：

function Button() {
  const handleClick = () => {
    console.log('按钮被点击');
  };

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

事件对象与参数传递

React 事件对象是合成事件（SyntheticEvent），与原生的浏览器事件行为一致。若需传递额外参数，可通过箭头函数或 bind 实现。

传递事件对象：

function Button() {
  const handleClick = (event) => {
    console.log(event.target); // 输出触发事件的DOM元素
  };

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

传递自定义参数：

function Button() {
  const handleClick = (id, event) => {
    console.log(id, event);
  };

  return (
    <button onClick={(e) => handleClick(123, e)}>
      带参数的点击
    </button>
  );
}

阻止默认行为与冒泡

通过调用事件对象的方法可阻止默认行为或事件冒泡，与原生 JavaScript 类似。

function Form() {
  const handleSubmit = (event) => {
    event.preventDefault(); // 阻止表单默认提交
    console.log('表单已提交');
  };

  return (
    <form onSubmit={handleSubmit}>
      <button type="submit">提交</button>
    </form>
  );
}

动态绑定事件

可根据组件状态动态决定事件处理函数，适用于条件渲染或状态切换场景。

function ToggleButton() {
  const [isOn, setIsOn] = useState(false);

  const handleClick = () => {
    setIsOn(!isOn);
  };

  return (
    <button onClick={handleClick}>
      {isOn ? '开启' : '关闭'}
    </button>
  );
}

性能优化与注意事项

避免内联箭头函数：在循环或频繁渲染的组件中，内联箭头函数会导致不必要的重新渲染。推荐将函数定义在组件外部或使用 useCallback 钩子优化。

优化示例：

function List() {
  const handleItemClick = useCallback((id) => {
    console.log(id);
  }, []);

  return items.map(item => (
    <div key={item.id} onClick={() => handleItemClick(item.id)}>
      {item.text}
    </div>
  ));
}

类组件绑定this：若使用类组件，需在构造函数中通过 bind 绑定 this，或使用箭头函数自动绑定。

react点击事件如何使用

class Button extends React.Component {
  constructor(props) {
    super(props);
    this.handleClick = this.handleClick.bind(this);
  }

  handleClick() {
    console.log(this.props); // 正确访问this
  }

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