React中多个react-datepicker同步更新问题排查与解决

问题根源 #

你当前的代码只声明了一个date状态变量，当页面中存在两个DatePicker组件时，它们都绑定了同一个状态和同一个handleChange方法——不管操作哪个选择器，都会修改这个唯一的date值，自然会导致两个选择器同步显示相同内容。

解决方法 #

方案1：为每个选择器单独维护状态 #

最直接的方式是给每个日期选择器分配独立的状态变量，让它们各自管理自己的选中值：

import React, { useState } from "react";
import "./styles.css";

import DatePicker from "react-datepicker";
import "react-datepicker/dist/react-datepicker.css";

export default function MyComponent() {
  // 分别为两个选择器声明状态
  const [firstDate, setFirstDate] = useState(new Date());
  const [secondDate, setSecondDate] = useState(new Date());

  return (
    <div>
      <DatePicker 
        selected={firstDate} 
        onChange={(date) => setFirstDate(date)} 
      />
      <DatePicker 
        selected={secondDate} 
        onChange={(date) => setSecondDate(date)} 
      />
    </div>
  );
}

方案2：用对象状态管理多个选择器（适合数量较多的场景） #

如果需要处理3个及以上的日期选择器，可以用对象形式的状态，通过自定义标识来区分要更新的目标：

import React, { useState } from "react";
import "./styles.css";

import DatePicker from "react-datepicker";
import "react-datepicker/dist/react-datepicker.css";

export default function MyComponent() {
  const [dates, setDates] = useState({
    pickerA: new Date(),
    pickerB: new Date()
  });

  // 通过pickerId区分要更新的状态属性
  const handleChange = (pickerId, date) => {
    setDates(prevState => ({ ...prevState, [pickerId]: date }));
  };

  return (
    <div>
      <DatePicker 
        selected={dates.pickerA} 
        onChange={(date) => handleChange("pickerA", date)} 
      />
      <DatePicker 
        selected={dates.pickerB} 
        onChange={(date) => handleChange("pickerB", date)} 
      />
    </div>
  );
}

额外说明 #

不需要为onChange事件设置唯一ID，核心是让每个选择器对应独立的状态片段——要么用多个独立的state变量，要么用对象/数组状态配合标识来定位更新目标，避免不同组件复用同一个状态导致的同步问题。

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