ReactJS中如何获取日期输入值？解决提交时日期undefined问题

这问题我遇过好多次了，核心问题在于HTML的type="date"输入框对value格式有严格要求，加上你对onChange事件的处理方式有偏差，咱们一步步来解决：

问题根源拆解 #

• HTML的type="date"输入框只接受YYYY-MM-DD格式的字符串作为value，你初始给的new Date()是一个Date对象，输入框无法正确解析这个值，导致后续onChange时获取不到正确的日期数据，最终提交时出现undefined。
• 你的handledChange函数直接把date作为参数，但实际上onChange事件的回调参数是一个事件对象（event），日期值需要从event.target.value里获取。

具体修复步骤 #

1. 修正state初始化 #

把初始的birthDate从new Date()改成符合格式的字符串。如果需要默认显示今天的日期，就把Date对象转成YYYY-MM-DD格式：

constructor(props) {
  super(props);
  // 生成今天的YYYY-MM-DD格式字符串
  const today = new Date();
  const formattedToday = today.toISOString().split('T')[0];
  
  this.state = {
    birthDate: formattedToday // 或者设为空字符串 ''（如果允许用户手动选择）
  };
  
  this.handleSubmit = this.handleSubmit.bind(this);
  this.handledChange = this.handledChange.bind(this);
}

2. 修正onChange事件处理函数 #

从event对象中提取正确的日期字符串，更新state：

handledChange(event) {
  // event.target.value就是YYYY-MM-DD格式的字符串
  this.setState({ birthDate: event.target.value });
}

3. 调整FormControl的value属性 #

确保value绑定的是state里的字符串（现在已经是符合要求的格式了）：

<ControlLabel>Date de naissance</ControlLabel>
<FormGroup controlId="birthDate" bsSize="large">
  <FormControl 
    autoFocus 
    type="date" 
    value={this.state.birthDate} 
    onChange={this.handledChange} 
  />
</FormGroup>

4. 提交表单时使用正确的日期值 #

在handleSubmit里直接取this.state.birthDate即可，它已经是YYYY-MM-DD格式的字符串，不会出现undefined：

handleSubmit(event) {
  event.preventDefault();
  const { birthDate } = this.state;
  console.log('提交的日期:', birthDate); // 输出YYYY-MM-DD格式的字符串
  // 这里写你的表单提交逻辑
}

这样修改后，你的日期输入就能正常工作，提交时也能拿到正确的YYYY-MM-DD格式日期，不会再出现undefined的问题了。

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