当前位置：首页 > React

react如何触发事件

2026-02-26 14:41:29React

触发事件的基本方法

在React中，事件触发通常通过组件的props传递事件处理函数实现。例如，按钮点击事件可以通过onClick属性绑定：

function ButtonComponent() {
  const handleClick = () => {
    console.log('Button clicked');
  };

  return <button onClick={handleClick}>Click Me</button>;
}

自定义组件的事件触发

对于自定义组件，可以通过props传递事件处理函数并在子组件中调用：

function ParentComponent() {
  const handleCustomEvent = () => {
    console.log('Custom event triggered');
  };

  return <ChildComponent onCustomEvent={handleCustomEvent} />;
}

function ChildComponent({ onCustomEvent }) {
  return <button onClick={onCustomEvent}>Trigger Event</button>;
}

合成事件的使用

React使用合成事件（SyntheticEvent）包装原生事件，提供跨浏览器兼容性。可以通过事件对象访问事件属性：

react如何触发事件

function InputComponent() {
  const handleChange = (event) => {
    console.log('Input value:', event.target.value);
  };

  return <input type="text" onChange={handleChange} />;
}

动态事件绑定

事件处理函数可以动态绑定参数，常见于列表渲染场景：

function ListComponent() {
  const items = ['Item 1', 'Item 2', 'Item 3'];

  const handleItemClick = (item) => {
    console.log('Clicked item:', item);
  };

  return (
    <ul>
      {items.map((item) => (
        <li key={item} onClick={() => handleItemClick(item)}>
          {item}
        </li>
      ))}
    </ul>
  );
}

阻止默认行为和冒泡

通过合成事件的方法可以阻止默认行为或事件冒泡：

react如何触发事件

function FormComponent() {
  const handleSubmit = (event) => {
    event.preventDefault();
    console.log('Form submitted');
  };

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

事件委托

在父元素上监听子元素事件，利用事件冒泡机制减少事件监听器数量：

function EventDelegation() {
  const handleListClick = (event) => {
    if (event.target.tagName === 'LI') {
      console.log('List item clicked:', event.target.textContent);
    }
  };

  return (
    <ul onClick={handleListClick}>
      <li>Item 1</li>
      <li>Item 2</li>
      <li>Item 3</li>
    </ul>
  );
}

键盘事件处理

监听键盘输入事件并处理特定按键：

function KeyboardComponent() {
  const handleKeyDown = (event) => {
    if (event.key === 'Enter') {
      console.log('Enter key pressed');
    }
  };

  return <input type="text" onKeyDown={handleKeyDown} />;
}