ReactJS中如何点击提交按钮后再发送AntD DatePicker值至后端？

核心思路是：先把选中的日期暂存到组件状态中，等用户点击提交按钮时，再从状态里取出日期发送后端请求。具体步骤如下：

1. 给组件添加状态存储选中的日期 #

因为你用的是类组件，先在组件里初始化状态，用来保存选中的日期对象和格式化后的日期字符串：

// 在组件类中添加state
state = {
  selectedDate: null,
  selectedDateString: ''
};

2. 修改onChangeextra函数，只存储日期不发请求 #

把原来直接调用后端接口的逻辑去掉，改成更新组件状态：

onChangeextra = (value, dateString) => {
  console.log('Selected Time: ', value);
  console.log('Formatted Selected Time: ', dateString);
  // 仅将选中的日期存入state，不立即触发后端请求
  this.setState({
    selectedDate: value,
    selectedDateString: dateString
  });
};

3. 编写提交按钮的点击处理函数 #

新建一个函数，在用户点击提交时，取出状态里的日期再发送请求（可以加个判断，防止用户没选日期就提交）：

handleSubmit = () => {
  const { selectedDate } = this.state;
  // 可选：判断用户是否已选择日期
  if (!selectedDate) {
    alert('请先选择日期');
    return;
  }
  const type = "reschdule class";
  // 点击提交后才调用后端请求函数
  this.onReschduleClasses(selectedDate, type);
};

4. 给提交按钮绑定点击事件 #

修改Button的onClick属性，指向刚才写的handleSubmit函数：

<div className='col-4'>
  <Button className="Add-now-btn mr-3" onClick={this.handleSubmit}>
    Submit
  </Button>
</div>

这样修改后，只有当你选择日期并点击提交按钮时，才会把请求发送到后端，不会再出现选完日期就自动发请求的情况。

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