当前位置：首页 > React

react父传子点击如何改变

2026-01-25 00:00:47React

父组件向子组件传递点击事件

在React中，父组件向子组件传递点击事件通常通过props实现。父组件定义一个处理函数，通过props传递给子组件，子组件在适当的时候调用该函数。

父组件定义处理函数并传递给子组件：

function ParentComponent() {
  const handleClick = () => {
    console.log('Button clicked in child component');
  };

  return <ChildComponent onClick={handleClick} />;
}

子组件接收并调用该函数：

function ChildComponent({ onClick }) {
  return <button onClick={onClick}>Click me</button>;
}

传递额外参数给父组件

如果需要在点击时传递额外数据给父组件，可以在子组件中包装事件处理函数：

function ChildComponent({ onClick }) {
  const handleClick = () => {
    const data = { id: 1, name: 'example' };
    onClick(data);
  };

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

父组件接收额外参数：

function ParentComponent() {
  const handleClick = (data) => {
    console.log('Received data:', data);
  };

  return <ChildComponent onClick={handleClick} />;
}

使用Context API进行深层传递

对于深层嵌套的组件，可以使用Context API来避免prop drilling：

创建Context：

const ClickContext = React.createContext();

function ParentComponent() {
  const handleClick = () => {
    console.log('Button clicked in deep child component');
  };

  return (
    <ClickContext.Provider value={handleClick}>
      <DeeplyNestedComponent />
    </ClickContext.Provider>
  );
}

子组件使用Context：

function DeeplyNestedComponent() {
  const onClick = React.useContext(ClickContext);

  return <button onClick={onClick}>Click me</button>;
}

使用自定义事件总线

对于更复杂的场景，可以创建自定义事件总线：

创建事件总线：

const EventBus = {
  listeners: {},
  subscribe(event, callback) {
    if (!this.listeners[event]) {
      this.listeners[event] = [];
    }
    this.listeners[event].push(callback);
  },
  emit(event, data) {
    if (this.listeners[event]) {
      this.listeners[event].forEach(callback => callback(data));
    }
  }
};

父组件订阅事件：

function ParentComponent() {
  React.useEffect(() => {
    EventBus.subscribe('childClick', (data) => {
      console.log('Child clicked with data:', data);
    });
  }, []);

  return <ChildComponent />;
}

子组件触发事件：

function ChildComponent() {
  const handleClick = () => {
    EventBus.emit('childClick', { id: 1 });
  };

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

react父传子点击如何改变