当前位置：首页 > React

react父传子点击如何改变

2026-03-11 08:53:50React

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

在React中，父组件可以通过props将点击事件处理函数传递给子组件。子组件接收到该函数后，可以在适当的时机调用它。

父组件中定义一个处理函数，并通过props传递给子组件：

function ParentComponent() {
  const handleClick = () => {
    console.log('点击事件从子组件触发');
  };

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

子组件接收并触发点击事件

子组件接收父组件传递的点击处理函数，并在需要的时候调用它：

function ChildComponent({ onClick }) {
  return (
    <button onClick={onClick}>
      点击我
    </button>
  );
}

传递额外参数

如果需要传递额外的参数给父组件的处理函数，可以在子组件中创建一个匿名函数：

function ChildComponent({ onClick }) {
  const handleClick = () => {
    const extraData = '额外数据';
    onClick(extraData);
  };

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

类组件实现方式

如果是使用类组件，实现方式类似：

父组件：

class ParentComponent extends React.Component {
  handleClick = (data) => {
    console.log('接收到子组件数据:', data);
  };

  render() {
    return <ChildComponent onClick={this.handleClick} />;
  }
}

子组件：

class ChildComponent extends React.Component {
  render() {
    return (
      <button onClick={() => this.props.onClick('子组件数据')}>
        点击我
      </button>
    );
  }
}

处理事件对象

如果需要同时处理事件对象和自定义参数：

function ChildComponent({ onClick }) {
  const handleClick = (e) => {
    const extraData = '额外数据';
    onClick(e, extraData);
  };

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

父组件中接收参数：

react父传子点击如何改变

function ParentComponent() {
  const handleClick = (e, data) => {
    e.preventDefault();
    console.log('事件对象:', e);
    console.log('自定义数据:', data);
  };

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