React实现多按钮控制Div显隐：多组件单页切换方案咨询

先理清楚你的核心需求：

• 三个步骤Div，按顺序切换显示
• 步骤1：点击「Commercial」或「Next」切换到步骤2
• 步骤2：点击「Back」回到步骤1，点击其他按钮（Office/Restaurant/Outlet/Next）切换到步骤3
• 步骤3：点击「Next」保存滑块选择的面积值

你现有代码的问题 #

1. DOM结构错误：把整个步骤Div嵌套在<button>里了，HTML规范中<button>不能包含其他<button>或块级元素，浏览器会自动修正这个错误结构，导致你的点击事件完全失效。
2. 状态管理不足：只用shown和hide两个布尔值，无法区分三个步骤的状态，逻辑判断会混乱。
3. 事件逻辑不对：toggle和toggles方法的状态更新逻辑不符合步骤切换的需求，没有对应到正确的触发条件。

正确的实现思路 #

1. 用单个状态变量跟踪步骤：定义currentStep状态，取值为1、2、3，分别对应三个步骤Div，初始值设为1。
2. 条件控制显示：每个步骤Div根据currentStep的值决定是否显示，用style的display属性或者React的条件渲染（比如currentStep === 1 && <Step1 />）。
3. 绑定对应切换事件：给每个按钮绑定点击事件，修改currentStep的值来切换步骤：
   • 步骤1的「Commercial」/「Next」：设置currentStep = 2
   • 步骤2的「Back」：设置currentStep = 1；其他按钮设置currentStep = 3
   • 步骤3的「Back」（如果需要）：设置currentStep = 2；「Next」触发保存逻辑
4. 处理滑块逻辑：在步骤3中维护滑块的value状态，实现滑块的 onChange 事件和保存方法。

完整实现代码 #

import React from 'react';
// 注意：如果使用第三方Slider组件，请确保已安装并正确导入，这里以Material-UI的Slider为例
import Slider from '@mui/material/Slider';

class PropertyStepForm extends React.Component {
  constructor() {
    super();
    this.state = {
      currentStep: 1, // 当前步骤：1/2/3
      sliderValue: 850 // 滑块初始值，对应min值
    };
  }

  // 切换到步骤2
  goToStep2 = () => {
    this.setState({ currentStep: 2 });
  };

  // 回到步骤1
  goToStep1 = () => {
    this.setState({ currentStep: 1 });
  };

  // 切换到步骤3
  goToStep3 = () => {
    this.setState({ currentStep: 3 });
  };

  // 从步骤3回到步骤2
  goToStep2From3 = () => {
    this.setState({ currentStep: 2 });
  };

  // 滑块值变化处理
  handleSliderChange = (event, newValue) => {
    this.setState({ sliderValue: newValue });
  };

  // 保存滑块值的逻辑
  saveValue = () => {
    console.log('保存的面积值：', this.state.sliderValue);
    // 这里可以添加发送请求、跳转页面等后续业务逻辑
  };

  render() {
    const { currentStep, sliderValue } = this.state;

    return (
      <div className="property-form-container">
        {/* 步骤1：选择房产类型 */}
        {currentStep === 1 && (
          <div className="step-container">
            <p>What is the type of your property?</p>
            <button>Residence</button>
            <button onClick={this.goToStep2}>Commercial</button>
            <span 
              style={{background:'transparent', border:'0', fontSize:'16px',color:'#ef3530'}}
              onClick={this.goToStep1} // 初始步骤，Back暂时无实际作用，可根据需求调整
            >Back</span>
            <span 
              style={{background:'transparent', border:'0', fontSize:'16px',color:'#ef3530'}}
              onClick={this.goToStep2}
            >Next</span>
          </div>
        )}

        {/* 步骤2：选择商业房产类型 */}
        {currentStep === 2 && (
          <div className="step-container">
            <p>What is the type of your commercial property?</p>
            <button onClick={this.goToStep3}>Office</button>
            <button onClick={this.goToStep3}>Restaurant</button>
            <button onClick={this.goToStep3}>Outlet</button>
            <span 
              style={{background:'transparent', border:'0', fontSize:'16px',color:'#ef3530'}}
              onClick={this.goToStep1}
            >Back</span>
            <span 
              style={{background:'transparent', border:'0', fontSize:'16px',color:'#ef3530'}}
              onClick={this.goToStep3}
            >Next</span>
          </div>
        )}

        {/* 步骤3：选择面积 */}
        {currentStep === 3 && (
          <div className="step-container">
            <div className='slider' style={{ marginTop:'165px',marginLeft:'319px',width:'700px',backgroundColor:'#EF5350'}}>
              <Slider 
                min={850} 
                max={5000} 
                value={sliderValue} 
                onChange={this.handleSliderChange}
                // 可根据需要添加onChangeStart/onChangeComplete事件
              />
              <div className='value'>{sliderValue} Squarefeet</div>
              <div style={{marginTop:'86px'}}>
                <span 
                  style={{background:'transparent', border:'0', fontSize:'16px',color:'#ef3530'}}
                  onClick={this.goToStep2From3}
                >Back</span>
                <span 
                  style={{background:'transparent', border:'0', fontSize:'16px',color:'#ef3530'}}
                  onClick={this.saveValue}
                >Next</span>
              </div>
            </div>
          </div>
        )}
      </div>
    );
  }
}

export default PropertyStepForm;

代码说明 #

• 用currentStep状态清晰区分三个步骤，每个步骤的显示逻辑一目了然
• 每个按钮都绑定了明确的切换方法，逻辑清晰易维护
• 修复了DOM结构错误，不再嵌套button元素
• 完善了滑块的状态管理和保存逻辑，你可以根据实际使用的Slider组件调整事件参数
• 给步骤3添加了Back按钮，方便用户返回上一步，你可以根据需求决定是否保留

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