React Typescript中子日期组件向父传值及自定义区间选择问题

1. 父子组件通信问题修复 #

你需要通过props传递回调函数的方式实现子组件向父组件传值：

• 父组件内部定义存储选中日期的状态，同时把修改状态的方法作为props传给子日期组件
• 子组件内部在选中值发生变化时，调用该回调函数把选中的日期数据传递回父组件

修改后的父组件代码：

import { useState } from 'react';
import DateComponent from './DateComponent';

export default function App() {
  // 支持存储普通日期选项、自定义起止日期两种格式的选中值
  const [chosenDate, setChosenDate] = useState<string | {startDate: Date | null, endDate: Date | null}>('');
  return (
    <div>
      {/* 传递更新方法给子组件 */}
      <DateComponent onDateChange={setChosenDate} />
      <div>Your chosen date was: {JSON.stringify(chosenDate)}</div>
    </div>
  );
}

2. 自定义起止日期无法独立选择问题修复 #

你当前两个日期选择器绑定了同一个selectedDate状态，所以修改任意一个都会同步更新另一个，需要拆分两个独立状态分别绑定起止日期：

• 子组件新增startDate、endDate两个状态，分别对应开始、结束日期选择器
• 两个日期选择器的value、onChange分别绑定对应状态和状态更新方法
• 日期变化时调用父组件传过来的回调，把最新的起止日期同步给父组件

修改后的子组件核心代码：

import { useState } from 'react';
// 定义子组件props类型
interface DateComponentProps {
  onDateChange: (val: string | {startDate: Date | null, endDate: Date | null}) => void
}

const DateComponent = ({ onDateChange }: DateComponentProps) => {
  // 原有其他状态省略（selectedOption、options等）
  const [startDate, setStartDate] = useState<Date | null>(null);
  const [endDate, setEndDate] = useState<Date | null>(null);

  const handleChange = (option) => {
    setSelectedOption(option);
    // 非自定义选项直接把选中值传给父组件
    if(option.value !== DateValueEnum.Custom) {
      onDateChange(option.value);
    }
  }

  return (
    <MuiPickersUtilsProvider utils={DateFnsUtils}>
      <div className="App">
        <div>
          <ReactSelect
            value={selectedOption as ValueType<OptionType>}
            onChange={(option) => handleChange(option)}
            isMulti={false}
            options={options}
          />

          {selectedOption === DateValueEnum.Custom ? (
            <div style={{ display: "flex" }}>
              <div style={{ width: "50%", float: "left", paddingRight: "5px" }}>
                <DatePicker
                  fullWidth
                  margin="normal"
                  required={true}
                  error={false}
                  invalidLabel={"Several values..."}
                  value={startDate}
                  onChange={(newDate) => {
                    setStartDate(newDate);
                    // 同步最新的起止日期到父组件
                    onDateChange({ startDate: newDate, endDate });
                  }}
                  format="MM/dd/yyyy"
                />
              </div>
              <DatePicker
                fullWidth
                margin="normal"
                required={true}
                error={false}
                invalidLabel={"Several values..."}
                value={endDate}
                onChange={(newDate) => {
                  setEndDate(newDate);
                  onDateChange({ startDate, endDate: newDate });
                }}
                format="MM/dd/yyyy"
              />
            </div>
          ) : null}
        </div>
      </div>
    </MuiPickersUtilsProvider>
  );
};

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