React实现多步表单时如何控制组件的显示与隐藏？

核心实现逻辑：在父组件App的state中新增步骤标识位，通过状态变化控制两个区块的展示/隐藏，完全遵循React数据驱动视图的开发模式，不需要手动操作DOM。

具体修改步骤 #

1. 修正基础语法问题 #

JSX语法中HTML的class属性必须替换为className，原代码中两个区块div上的class="step_one"、class="step_two"属于错误写法，会触发运行时警告，需要先修正。

2. 扩展App组件状态类型 #

在IState接口中新增步骤控制字段，初始化时默认展示第一步：

interface IState {
  cName: string;
  cEmail: string;
  currentStep: number; // 新增：当前展示的步骤标识
}

在constructor中给新增的状态赋初始值：

this.state = {
  cName: '',
  cEmail: '',
  currentStep: 1 // 初始加载时显示第一步
}

3. 修改提交按钮的点击逻辑 #

在computeBmi方法中，执行原有业务逻辑的同时，更新步骤状态为第二步：

computeBmi() {
  // 原有业务逻辑保留
  // 切换到第二步
  this.setState({ currentStep: 2 })
}

4. 根据状态控制区块渲染 #

在render方法中，通过currentStep的值判断要展示的区块，推荐使用条件渲染（隐藏的区块不会挂载到DOM中，性能更优）：

render() {
  return (
    <div>
      {/* 第一步区块：currentStep为1时渲染 */}
      {this.state.currentStep === 1 && (
        <div className="step_one">
          <TextInput label="Please confirm your full name?" placeholder="Your full name" onChange={this.nameChange} />
          <TextInput label="Please confirm your email?" placeholder="Your Email ID" onChange={this.emailChange} />
          <MyButton label="SUBMIT" onClick={ this.computeBmi } />              
        </div>
      )}
      {/* 第二步区块：currentStep为2时渲染 */}
      {this.state.currentStep === 2 && (
        <div className="step_two">
          // 第二步的业务代码
        </div>
      )}
    </div>
  )
}

补充说明 #

• 你提供的TextInput.tsx和MyButton.tsx组件逻辑完全符合要求，事件已经正确透传，不需要做任何修改
• 如果需要保留DOM结构仅控制CSS显隐（比如做切换动画），可以替换条件渲染为行内样式控制：

  <div className="step_one" style={{ display: this.state.currentStep === 1 ? 'block' : 'none' }}>
  <div className="step_two" style={{ display: this.state.currentStep === 2 ? 'block' : 'none' }}>
  

  这种方式两个区块都会始终挂载在DOM上，仅通过CSS控制可见性。

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