React中子组件向父组件传递按钮点击事件实现组件切换

我来帮你搞定这个子组件触发父组件切换的问题，其实核心就是状态提升+props传递回调函数，下面结合你的类组件代码给你一步步讲清楚：

1. 父组件改造：管理状态+提供切换方法 #

首先你的父组件Cancel需要维护一个状态来控制当前显示哪个子组件，同时定义一个切换状态的方法，再把这个方法通过props传给子组件。

完整的父组件代码如下：

import React from 'react';
import CancelOffer from '../CancelPages/CancelOffer';
import CancelWarning from '../CancelPages/CancelWarning';

class Cancel extends React.Component {
  constructor(props) {
    super(props);
    // 初始化状态：默认显示CancelOffer组件
    this.state = {
      currentPage: 'offer' // 用字符串标识当前页面，也可以用布尔值比如isWarningActive: false
    };
    // 绑定this（如果用箭头函数可以省略这一步）
    this.handleTogglePage = this.handleTogglePage.bind(this);
  }

  // 定义切换页面的方法
  handleTogglePage() {
    this.setState(prevState => ({
      currentPage: prevState.currentPage === 'offer' ? 'warning' : 'offer'
    }));
  }

  render() {
    const { currentPage } = this.state;
    return (
      <div className="cancel-container">
        {/* 根据currentPage的值切换显示子组件 */}
        {currentPage === 'offer' ? (
          <CancelOffer onToggle={this.handleTogglePage} />
        ) : (
          <CancelWarning onToggle={this.handleTogglePage} />
        )}
      </div>
    );
  }
}

export default Cancel;

2. 子组件改造：调用父组件传递的回调函数 #

子组件只需要接收父组件传来的onToggle方法，在按钮点击时调用它就行。

CancelOffer子组件示例： #

import React from 'react';

class CancelOffer extends React.Component {
  render() {
    return (
      <div className="cancel-offer">
        <h3>Cancel Offer Page</h3>
        {/* 点击按钮时调用父组件的onToggle方法 */}
        <button onClick={this.props.onToggle}>
          Proceed to Cancel Warning
        </button>
        {/* 其他页面内容 */}
      </div>
    );
  }
}

export default CancelOffer;

CancelWarning子组件示例： #

import React from 'react';

class CancelWarning extends React.Component {
  render() {
    return (
      <div className="cancel-warning">
        <h3>Cancel Warning Page</h3>
        <p>Are you sure you want to cancel this offer?</p>
        {/* 同样调用父组件的onToggle回到上一页 */}
        <button onClick={this.props.onToggle}>
          Go Back to Offer Page
        </button>
        {/* 其他操作按钮比如确认取消 */}
      </div>
    );
  }
}

export default CancelWarning;

核心原理说明 #

• 状态提升：把控制组件切换的状态放在父组件里，因为父组件是两个子组件的共同父级，适合作为状态的管理者。
• 回调函数传递：父组件把修改状态的方法（handleTogglePage）通过props传给子组件，子组件在触发点击事件时调用这个方法，让父组件更新状态，进而触发重新渲染，完成组件切换。

如果之后你想改用函数组件，也可以用useState钩子实现，逻辑是一样的：

// 函数组件版父组件
import React, { useState } from 'react';
import CancelOffer from '../CancelPages/CancelOffer';
import CancelWarning from '../CancelPages/CancelWarning';

const Cancel = () => {
  const [currentPage, setCurrentPage] = useState('offer');

  const handleTogglePage = () => {
    setCurrentPage(prev => prev === 'offer' ? 'warning' : 'offer');
  };

  return (
    <div className="cancel-container">
      {currentPage === 'offer' ? (
        <CancelOffer onToggle={handleTogglePage} />
      ) : (
        <CancelWarning onToggle={handleTogglePage} />
      )}
    </div>
  );
};

export default Cancel;

内容的提问来源于stack exchange，提问作者Matt