为什么更改一个输入中的值也会更改另一个输入中的值?

我在努力学习和试验反作用钩子。对于一个小型测试项目,我想在用户更改显示模式或更改日期时更新日历网格。

这里是 Calendar.jsx . 状态存储在这里。 date 和 setDate 作为道具传递给 CalendarDatePicker .

import React, {useState} from 'react';
import PropTypes from 'prop-types';
import CalendarDisplayMode from './CalendarDisplayMode';
import CalendarDatePicker from './CalendarDatePicker';
import CalendarGrid from './CalendarGrid';

const Calendar = props => {
    const [date, setDate] = useState(props.date);
    const [mode, setMode] = useState(props.mode);

    return (
        <div className="bg-light border border-dark rounded p-1">
            <CalendarDisplayMode mode={mode} setMode={setMode} />
            <CalendarDatePicker date={date} setDate={setDate} />
            <CalendarGrid displayDate={date} displayMode={mode} />
        </div>
    );
}

Calendar.propTypes = {
    date: PropTypes.instanceOf(Date).isRequired,
    mode: PropTypes.oneOf(['day', 'week', 'month', 'year']).isRequired
}

export default Calendar;

这里是 CalendarDatePicker.jsx . 当任何输入改变时 设置当前日期 被调用并传递了新日期。这将更新中的状态 Calendar .

import React from 'react';
import PropTypes from 'prop-types';

const CalendarDatePicker = ({date, setDate}) => {
    const year = date.getFullYear();
    const month = date.getMonth() + 1;
    const day = date.getDate();

    const handleYearChange = event => setDate(new Date(event.target.value, month, day));
    const handleMonthChange = event => setDate(new Date(year, event.target.value - 1, day));
    const handleDayChange = event => setDate(new Date(year, month, event.target.value));

    return (
        <div>
            <div className="form-group">
                <label htmlFor="display-year">Year</label>
                <input
                    type="number"
                    id="display-year"
                    name="display-year"
                    className="form-control form-control-sm"
                    min="1"
                    value={year}
                    onChange={handleYearChange} />
            </div>
            <div className="form-group">
                <label htmlFor="display-month">Month</label>
                <input
                    type="number"
                    id="display-month"
                    name="display-month"
                    className="form-control form-control-sm"
                    min="1"
                    max="12"
                    value={month}
                    onChange={handleMonthChange} />
            </div>
            <div className="form-group">
                <label htmlFor="display-day">Day</label>
                <input
                    type="number"
                    id="display-day"
                    name="display-day"
                    className="form-control form-control-sm"
                    min="1"
                    max="31"
                    value={day}
                    onChange={handleDayChange} />
            </div>
        </div>
    );
}

CalendarDatePicker.propTypes = {
    date: PropTypes.instanceOf(Date).isRequired,
    setDate: PropTypes.func.isRequired
}

export default CalendarDatePicker;

但我在观察奇怪的行为。如果我在“年”字段中增加或减少数字,则“月”字段将增加其值。如果我增加或减少月份字段,其他字段都不会更改值(如预期)。如果我增加或减少“日”字段中的数字,则“月”字段将增加其值。如果我在day字段中增加或减少的数字足够多,那么month字段将滚动(从12到1),year字段也将增加其值。

有人能解释一下这里可能发生的事情以及如何解决吗?