React多步骤表单输入值切换步骤后消失的问题排查与修复

核心问题：Prop名称拼写错误 #

你遇到的输入值丢失问题，本质是父组件向子组件传递props时的拼写失误，导致子组件输入框无法正确绑定到MasterForm的state值：

1. 在MasterForm.js的render方法中，传给BoatForm的prop写成了boat_lenght（少了一个字母h），但BoatForm里实际用的是this.props.boat_length（正确拼写是length）；
2. 传给StayForm的prop写成了amount_of_peopel（peopel拼写错误），但StayForm里绑定的是this.props.amount_of_people。

因为prop名称不匹配，子组件的输入框其实绑定的是undefined，切换步骤重新渲染时，自然看不到之前输入的内容。

修复方案 #

只需要修正MasterForm中传递props时的拼写错误即可：

// MasterForm.js的render部分修改如下
<BoatForm 
  currentStep={this.state.currentStep} 
  handleChange={this.handleChange} 
  boat_length={this.state.boat_length}  // 修正拼写：boat_lenght → boat_length
  boat_width={this.state.boat_width} 
  boat_depth={this.state.boat_depth} 
/>
<StayForm 
  currentStep={this.state.currentStep} 
  handleChange={this.handleChange} 
  amount_of_people={this.state.amount_of_people}  // 修正拼写：amount_of_peopel → amount_of_people
  arrival_date={this.state.arrival_date} 
  leave_date={this.state.leave_date} 
  use_of_electricity={this.state.use_of_electricity} 
  box_number={this.state.box_number} 
/>

修正后，子组件输入框就能正确绑定到MasterForm的state值，切换步骤时值会正常保留。

额外代码优化建议 #

除了上述问题，还有几个可以提升代码健壮性和可维护性的点：

• 简化props传递：当前每个state字段都单独传props，字段增多后会非常繁琐。可以传递解构后的对象：

  <PersonalForm 
    currentStep={this.state.currentStep} 
    handleChange={this.handleChange} 
    formData={{
      first_name: this.state.first_name,
      last_name: this.state.last_name,
      e_mail: this.state.e_mail,
      phone_number: this.state.phone_number
    }}
  />
  

  子组件通过this.props.formData.first_name取值，代码更简洁。

• 替换废弃的生命周期钩子：componentWillUpdate已经被React标记为废弃，建议改用componentDidUpdate处理localStorage更新：

  componentDidUpdate(prevProps, prevState) {
    if (prevState !== this.state) {
      localStorage.setItem('reservation_forms', JSON.stringify(this.state));
    }
  }
  

  这样只有当state真正变化时才写入localStorage，避免不必要的性能消耗。

• 修复复选框绑定逻辑：StayForm中的复选框checked属性没有绑定到state，且未正确处理复选框的取值逻辑：

  // StayForm.js中复选框修改为
  <input 
    type="checkbox" 
    checked={this.props.use_of_electricity} 
    name="use_of_electricity" 
    onChange={this.props.handleChange} 
  />
  // MasterForm.js的handleChange添加复选框处理
  handleChange(e) {
    const {name, value, type, checked} = e.target;
    const inputValue = type === 'checkbox' ? checked : value;
    this.setState({[name]: inputValue});
  }
  

• 规范提交按钮类型：把submit按钮的type="button"改为type="submit"，符合HTML表单规范：

  <button type="submit">Submit</button>
  

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