React单页面多按钮导航问卷功能开发问题

针对你的需求，只用单个布尔值showMessage没法区分不同问卷阶段，我们需要用更精细的状态跟踪问卷步骤。下面是修改后的完整代码，完全满足你的要求：

class App extends React.Component {
  constructor() {
    super();
    // step跟踪问卷阶段：0=初始（问是否有笔记本），1=问笔记本类型，2=问购买时间，-1=无笔记本分支
    this.state = {
      step: 0,
      laptopType: '' // 可选：记录用户选择的笔记本类型，方便后续收集数据
    };
  }

  // 更新问卷步骤的通用方法
  setStep = (newStep) => {
    this.setState({ step: newStep });
  };

  // 记录笔记本类型并进入下一个步骤
  selectLaptopType = (type) => {
    this.setState({
      laptopType: type,
      step: 2
    });
  };

  render() {
    const { step } = this.state;
    return (
      <div className="survey-container">
        {/* 初始问题：是否有笔记本 */}
        {step === 0 && (
          <div>
            Do you have a laptop?<br />
            <button onClick={() => this.setStep(1)}>Yes</button>
            <button onClick={() => this.setStep(-1)}>No</button>
          </div>
        )}

        {/* 有笔记本分支：选择类型 */}
        {step === 1 && (
          <div>
            What kind of laptop do you use?<br />
            <button onClick={() => this.selectLaptopType('windows')}>Windows</button>
            <button onClick={() => this.selectLaptopType('ios')}>iOS</button>
            <button onClick={() => this.selectLaptopType('none')}>以上皆非</button>
          </div>
        )}

        {/* 购买时间问题 */}
        {step === 2 && (
          <div>
            When did you buy it?<br />
            {/* 这里可继续扩展选项，比如年份按钮或输入框 */}
            <button onClick={() => this.setStep(3)}>2020年后</button>
            <button onClick={() => this.setStep(3)}>2020年前</button>
          </div>
        )}

        {/* 无笔记本分支 */}
        {step === -1 && (
          <div>
            Do you plan to buy a laptop in the future?<br />
            <button onClick={() => this.setStep(0)}>Yes</button>
            <button onClick={() => this.setStep(0)}>No</button>
          </div>
        )}
      </div>
    );
  }
}

关键改动说明： #

• 状态精细化：用step变量替代单个布尔值，清晰区分不同问卷阶段，避免状态混乱
• 事件处理优化：使用箭头函数直接绑定事件，替代bind写法，更简洁且符合React类组件最佳实践
• 分支逻辑清晰：通过step的值判断显示对应内容，所有非当前步骤的内容自动隐藏，无需额外隐藏样式
• 可扩展性强：可轻松添加新问卷步骤，或在state中记录用户所有选择，方便后续提交或展示结果

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