React中如何修改绑定模型字段的@material-ui KeyboardDatePicker值

核心原因是KeyboardDatePicker属于React受控组件，value属性绑定的数据源必须是React可感知的响应式数据，直接修改模型变量、原生修改DOM的操作不会触发React重渲染，所以组件显示不会更新。

操作步骤 #

1. 将Person模型存入组件state做响应式管理
   类组件初始化时把Person挂载到state中：

constructor(props) {
  super(props);
  this.state = {
    Person: {
      // 保留原Person所有字段
      LocationExpiryDate: moment().format('D/MM/YYYY'),
      CPPEPracticeLocation: null
    }
  }
}

2. 调整KeyboardDatePicker的绑定逻辑
   把value绑定为state中的字段，同时补充onChange事件支持手动修改日期：

<div>                    
Expiry Date:<KeyboardDatePicker
  id="ExpiryDate"
  disablePast 
  minDate={new Date()}
  format="D/MM/yyyy" 
  mask="__/__/____"
  value={this.state.Person.LocationExpiryDate} 
  onChange={(date) => {
    this.setState(prev => ({
      Person: {
        ...prev.Person,
        LocationExpiryDate: moment(date).format('D/MM/YYYY')
      }
    }))
  }}
/>
</div>

3. 修改HandleChangePerson逻辑更新state
   通过setState修改响应式状态，自动触发组件重渲染更新日期选择器显示：

HandleChangePerson (event, propertyName) {
  if (propertyName == 'Location') {
    // 可直接简化日期计算，无需先转ISO字符串切片
    const newExpiryDate = moment().add(6, 'M').format('D/MM/YYYY') 
    this.setState(prev => ({
      Person: {
        ...prev.Person,
        // 同时更新下拉绑定的字段
        CPPEPracticeLocation: event.target.value,
        LocationExpiryDate: newExpiryDate
      }
    }))
  }
}

特殊场景适配（使用MobX/Redux等状态管理工具） #

如果Person模型是存在全局状态库中：

• 确保Person对应的字段已配置为可观察属性（MobX需要加@observable装饰器）
• 直接修改模型对应字段即可触发重渲染，不需要使用setState：

HandleChangePerson (event, propertyName) {
  if (propertyName == 'Location') {
    const newExpiryDate = moment().add(6, 'M').format('D/MM/YYYY') 
    Person.CPPEPracticeLocation = event.target.value
    Person.LocationExpiryDate = newExpiryDate
  }
}

注意事项 #

• 保持KeyboardDatePicker的format属性和moment的format参数大小写完全一致，避免格式不匹配导致值不显示
• 确认你项目中已正确引入moment依赖

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