React同级组件监听彼此状态变化实现出生日期选择验证

按照你说的「子组件传值给父组件→父组件维护公共状态→父组件将状态下发给目标子组件」的思路，具体实现步骤如下：

1. 父组件Form逻辑调整 #

• 首先在父组件中通过useState维护全局的选中年份状态，同时定义接收子组件传值的回调方法，再将状态下发给月份组件：

import { useState } from 'react';
import BirthYear from './BirthYear';
import BirthMonth from './BirthMonth';

const Form = () => {
  // 存储用户选中的年份
  const [selectedYear, setSelectedYear] = useState(null);

  // 接收年份组件回传的选中值
  const handleYearChange = (year) => {
    setSelectedYear(year);
  };

  return (
    <div>
      {/* 给年份组件传回调方法用来接收子组件值 */}
      <BirthYear onYearChange={handleYearChange} />
      {/* 把选中的年份下发给月份组件 */}
      <BirthMonth selectedYear={selectedYear} />
      {/* 其余组件逻辑保持你的原有实现即可 */}
    </div>
  )
}
export default Form;

2. 年份子组件BirthYear逻辑调整 #

• 选中值变化时调用父组件传入的回调方法，将选中的年份回传给父组件：

const BirthYear = ({ onYearChange }) => {
  const handleSelectChange = (e) => {
    const currentYear = e.target.value;
    // 调用父组件传的回调方法回传值
    onYearChange(currentYear);
  };

  return (
    <select onChange={handleSelectChange}>
      {/* 保持你原有的年份选项生成逻辑 */}
    </select>
  )
}
export default BirthYear;

3. 月份子组件BirthMonth逻辑调整 #

• 直接接收父组件传来的selectedYear参数，即可打印拿到选中的年份：

const BirthMonth = ({ selectedYear }) => {
  // 已经可以实时拿到选中的年份，直接打印即可
  console.log('当前选中的年份：', selectedYear);

  return (
    <select>
      {/* 保持你原有的月份选项生成逻辑，后续联动规则可以基于拿到的selectedYear自行实现 */}
    </select>
  )
}
export default BirthMonth;

完成以上修改后，年份选择器切换选项时，月份组件就能实时获取到最新的选中年份，后续的月份、日期联动逻辑，都可以按照同样的「子传父→父传子」逻辑实现即可。

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