React状态更新后input值未同步？FullCalendar日期点击模态框问题

嘿，这个问题我之前碰到过类似的情况！核心原因其实很简单：datetime-local输入框的格式要求和FullCalendar返回的Date对象不匹配。

问题拆解 #

• FullCalendar的info.date给你的是一个原生JavaScript Date对象
• 但HTML的datetime-local输入框只认ISO 8601格式的字符串（比如2024-05-20T14:30这种YYYY-MM-DDTHH:mm的格式）
  直接把Date对象塞给输入框的value，浏览器根本识别不了，自然就显示为空啦。

具体修复步骤 #

1. 转换dateClick中的日期格式

修改你的dateClick回调，把拿到的Date对象转成输入框能识别的字符串：

dateClick={(info) => {
  // 把Date对象转成ISO字符串，截取前16位去掉秒和时区部分，刚好匹配datetime-local要求
  const formattedDate = info.date.toISOString().slice(0, 16);
  this.setState({
    modal: true,
    addClass: { start: formattedDate }
  });
}}

为啥用slice(0,16)？因为toISOString()返回的是2024-05-20T15:45:30.123Z这种带秒和时区的字符串，而datetime-local不需要这部分，截到分钟就完美适配了。

2. 确保输入框的value绑定正确

检查你的Input组件，给value加个兜底处理，避免初始状态为undefined导致输入框报错：

<Input 
  type="datetime-local" 
  name="course" 
  value={this.state.addClass.start || ''} 
  onChange={this.handleForm} 
  required 
/>

3. 调整表单 onChange 逻辑（如果需要）

你的handleForm方法里，直接把输入框返回的字符串格式值更新到state就行，不用额外转换：

handleForm = (e) => {
  const { name, value } = e.target;
  this.setState(prevState => ({
    addClass: {
      ...prevState.addClass,
      [name]: value
    }
  }));
}

这样改完之后，你点击日历日期弹出模态框时，输入框就会正确显示选中的日期啦（默认时间是00:00，如果需要自定义默认时间，在转换格式的时候手动调整Date对象的时分秒就行）。

内容的提问来源于stack exchange，提问作者Bentaiba Miled Basma