如何获取Ant Design带时间的RangePicker值并解决动态增删报错问题

你的代码主要存在几个核心问题，导致选择值时报错且无法将选中的日期范围存入状态用于后续传参，我来一步步帮你解决：

问题根源分析 #

• 方法this指向丢失：ajouterTranche、supprimerTranche、onChange等方法在调用时，this会脱离组件上下文，无法正确更新状态
• 删除事件直接执行函数：supprimerTranche(i)写法会在组件渲染时就触发删除操作，而非点击图标时才执行
• 选中值未同步到状态：当前没有把RangePicker的选择结果存入tranches数组，无法提取数据传给后端

修复后的完整代码 #

import { DatePicker, Row, Col, Icon, LocaleProvider } from 'antd';
import moment from 'moment-timezone';
import fr_FR from 'antd/lib/locale-provider/fr_FR';
import "moment/locale/fr";
import { Component } from 'react';

const { RangePicker } = DatePicker;

export default class App extends Component {
  constructor(props) {
    super(props);
    this.state= {
      tranches :[{date:null}]
    }
    // 绑定方法的this指向，确保事件中能访问组件状态
    this.ajouterTranche = this.ajouterTranche.bind(this);
    this.supprimerTranche = this.supprimerTranche.bind(this);
    this.handleRangeChange = this.handleRangeChange.bind(this);
  }

  // 新增时间段行
  ajouterTranche() {
    this.setState(prevState => ({
      tranches: [...prevState.tranches, { date: null }]
    }));
  }

  // 删除指定索引的时间段行：返回回调函数，点击时才执行删除
  supprimerTranche(index) {
    return () => {
      this.setState(prevState => ({
        tranches: prevState.tranches.filter((_, i) => i !== index)
      }));
    }
  }

  // 同步RangePicker选中值到对应索引的tranches项
  handleRangeChange(index) {
    return (value, dateString) => {
      console.log('Selected Time: ', value);
      console.log('Formatted Selected Time: ', dateString);
      this.setState(prevState => {
        const newTranches = [...prevState.tranches];
        newTranches[index].date = dateString; // 存储格式化后的字符串，也可存moment对象value
        return { tranches: newTranches };
      });
    }
  }

  onOk(value) {
    console.log('onOk: ', value);
  }

  // 获取所有有效时间段数据，用于传给后端
  getTranchesForBackend() {
    const validData = this.state.tranches.filter(item => item.date !== null);
    console.log('待发送给后端的时间段数据：', validData);
    return validData;
  }

  render() {
    return (
      <div>
        { this.state.tranches.map((el, i) => (
          <Row key={i}>
            <Col span={12}>
              &nbsp; &nbsp; &nbsp; <label className="pt-label modifier"><strong>Période</strong></label>
              <LocaleProvider locale={fr_FR}>
                <RangePicker
                  allowClear={false}
                  style={{ width: '547px', marginLeft:'20px'}}
                  locale="fr"
                  separator="-"
                  onChange={this.handleRangeChange(i)} // 绑定当前索引，同步对应项的值
                  showTime={{ format: 'HH:mm' }}
                  format="DD/MM/YYYY HH:mm"
                  placeholder={['Date et heure de début', 'Date et heure de fin']}
                  onOk={this.onOk}
                  // 设置回显值，确保重新渲染不丢失已选内容
                  value={el.date ? [moment(el.date[0], 'DD/MM/YYYY HH:mm'), moment(el.date[1], 'DD/MM/YYYY HH:mm')] : null}
                />
              </LocaleProvider>
            </Col>
            <Col span={12}>
              {i === 0 ? (
                <>
                  <Icon type="plus-circle" theme="twoTone" twoToneColor="#52c41a" onClick={this.ajouterTranche}/>
                  <br/>
                </>
              ) : (
                <>
                  <Icon type="close-circle" theme="twoTone" twoToneColor="red" onClick={this.supprimerTranche(i)}/>
                  <Icon type="plus-circle" theme="twoTone" twoToneColor="#52c41a" onClick={this.ajouterTranche}/>
                  <br/>
                </>
              )}
            </Col>
          </Row>
        ))}
        {/* 测试按钮：点击可查看待发送的后端数据 */}
        <button style={{margin: '10px 0'}} onClick={() => this.getTranchesForBackend()}>查看后端数据</button>
      </div>
    );
  }
}

关键修复点说明 #

1. 绑定this上下文：在构造函数中通过bind绑定所有自定义方法，确保事件回调中能正确访问组件的state和setState
2. 修改删除事件逻辑：让supprimerTranche返回一个箭头函数，避免组件渲染时就触发删除，仅在点击图标时执行
3. 同步选中值到状态：新增handleRangeChange方法，接收当前RangePicker的索引，将选中的日期范围存入state.tranches对应项中
4. 添加值回显：通过value属性设置当前项的选中值，保证组件重新渲染时不会丢失已选择的内容
5. 新增数据提取方法：getTranchesForBackend过滤出已选择的有效数据，方便后续直接传给后端

现在你选择RangePicker的值时不会再报错，所有选中的日期范围都会存储在state.tranches中，调用getTranchesForBackend就能拿到可直接传给后端的数据了。

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