时间戳

首页 > 解决方案 > 为什么改变一个输入中的值也会改变另一个输入中的值？

reactjs - 为什么改变一个输入中的值也会改变另一个输入中的值？

问题描述

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

这里是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。当调用任何输入更改setDate并传递新日期时。这应该更新状态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;

但我观察到奇怪的行为。如果我增加或减少年份字段中的数字，月份字段会增加其值。如果我增加或减少月份字段，其他字段都不会更改值（如预期的那样）。如果我增加或减少日字段中的数字，月字段会增加其值。如果我足够增加或减少日字段中的数字，则月字段会翻转（从 12 到 1），并且年字段也会增加其值。

谁能解释这里可能发生的事情以及如何解决它？

标签： reactjsreact-hooks

解决方案

    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));

而你正在传递实际上是handleYearChange-你需要做的。handleDayChangemonthdate.getMonth() + 1month - 1

这就是为什么当年份或日期发生变化时，您的月份会增加 1。

推荐阅读