基本上,我有一个DateView组件,我从中检索ChooseCalendar组件中的日期。然而,我有代码检索这些数据从DateView在一个useEffect块,因为我传递一个dateType变量,这是一个useState的一部分组件。问题是在ChooseCalendar组件中,我无法访问DateView组件的props中的数据。我想要访问的数据是onDateTypeChange存储的值。有没有办法解决这个问题,这样我就可以访问这些数据?
下面是我的chooseccalendar .js组件:
import React, { useState, useEffect, useCallback } from 'react';
import DateView from '../components/DateView';
export default function ChooseCalendar(props) {
const [calendarType, setCalendarType] = useState('day');
const [calendarView, setCalendarView] = useState(null);
const [selectedDate, setSelectedDate] = useState(null);
// Retrieve dropdown value and pass it to props
const handleCalendarTypeChange = (event) => {
const newCalendarType = event.target.value;
setCalendarType(newCalendarType);
props.onCalendarTypeChange(newCalendarType);
};
const handleDateTypeChange = useCallback((date) => {
setSelectedDate(date);
}, []);
useEffect(() => {
let newCalendarView;
if (calendarType === 'day') {
newCalendarView = <DateView dateType="day" onDateTypeChange={handleDateTypeChange} />;
} else if (calendarType === 'week') {
newCalendarView = <DateView dateType="week" onDateTypeChange={handleDateTypeChange} />;
} else if (calendarType === 'month') {
newCalendarView = <DateView dateType="month" onDateTypeChange={handleDateTypeChange} />;
}
setCalendarView(newCalendarView);
}, [calendarType, handleDateTypeChange]);
useEffect(() => {
if (selectedDate) {
props.onDateTypeChange(selectedDate);
console.log('Calendar selected date : ', selectedDate);
}
}, [selectedDate, props.onDateTypeChange]);
return (
<section className="border-4 rounded-lg p-2 px-28 bg-red-400 text-slate-800">
<h2 className="text-xl font-bold">Calendar Settings</h2>
<p className="font-semibold mb-1">Change your calendar settings</p>
<select onChange={handleCalendarTypeChange} className="w-56 border-4 rounded p-2 bg-white hover:bg-gray-100 text-slate-800">
<option value="day">Day View</option>
<option value="week">Week View</option>
<option value="month">Month View</option>
</select>
{calendarView}
</section>
);
}
这是我的DateView.js组件:
export default function dateViewDisplayer(props){
const dateType = props.dateType;
const handleDateTypeChange = (event) => {
const date = event.target.value;
props.onDateTypeChange(date);
};
if (dateType === 'day'){
return (
<section>
<p className="font-semibold mb-1">Choose your day</p>
<input onChange={handleDateTypeChange} className="w-56 border-4 rounded p-2 bg-white hover:bg-gray-100 text-slate-800" type="date" />
</section>
);
}
if (dateType === 'week'){
return (
<section>
<p className="font-semibold mb-1">Choose your week</p>
<input onChange={handleDateTypeChange} className="w-56 border-4 rounded p-2 bg-white hover:bg-gray-100 text-slate-800" type="week" />
</section>
);
}
if (dateType === 'month'){
return (
<section>
<p className="font-semibold mb-1">Choose your month</p>
<input onChange={handleDateTypeChange} className="w-56 border-4 rounded p-2 bg-white hover:bg-gray-100 text-slate-800" type="month" />
</section>
);
}
}
我想知道使用条件呈现是否比在状态中存储新组件更容易。试试这样的东西怎么样?注意,不再需要calenderView
状态和useEffect
状态,现在可以像正常一样传递所需的handleDateTypeChange
prop。
import React, { useState, useEffect, useCallback } from 'react';
import DateView from '../components/DateView';
export default function ChooseCalendar(props) {
const [calendarType, setCalendarType] = useState('day');
const [selectedDate, setSelectedDate] = useState(null);
// Retrieve dropdown value and pass it to props
const handleCalendarTypeChange = (event) => {
const newCalendarType = event.target.value;
setCalendarType(newCalendarType);
props.onCalendarTypeChange(newCalendarType);
};
const handleDateTypeChange = useCallback((date) => {
setSelectedDate(date);
}, []);
useEffect(() => {
if (selectedDate) {
props.onDateTypeChange(selectedDate);
console.log('Calendar selected date : ', selectedDate);
}
}, [selectedDate, props.onDateTypeChange]);
return (
<section className='border-4 rounded-lg p-2 px-28 bg-red-400 text-slate-800'>
<h2 className='text-xl font-bold'>Calendar Settings</h2>
<p className='font-semibold mb-1'>Change your calendar settings</p>
<select
onChange={handleCalendarTypeChange}
className='w-56 border-4 rounded p-2 bg-white hover:bg-gray-100 text-slate-800'
>
<option value='day'>Day View</option>
<option value='week'>Week View</option>
<option value='month'>Month View</option>
</select>
{calendarType === 'day' && (
<DateView dateType='day' onDateTypeChange={handleDateTypeChange} />
)}
{calendarType === 'week' && (
<DateView dateType='week' onDateTypeChange={handleDateTypeChange} />
)}
{calendarType === 'month' && (
<DateView dateType='month' onDateTypeChange={handleDateTypeChange} />
)}
</section>
);
}
更新:
或者更简单,因为看起来dateType
与calendarType
相同,您可以这样做(缩短以突出返回值的变化):
...
export default function ChooseCalendar(props) {
...
return (
<section className='border-4 rounded-lg p-2 px-28 bg-red-400 text-slate-800'>
<h2 className='text-xl font-bold'>Calendar Settings</h2>
<p className='font-semibold mb-1'>Change your calendar settings</p>
<select
onChange={handleCalendarTypeChange}
className='w-56 border-4 rounded p-2 bg-white hover:bg-gray-100 text-slate-800'
>
<option value='day'>Day View</option>
<option value='week'>Week View</option>
<option value='month'>Month View</option>
</select>
<DateView dateType={calendarType} onDateTypeChange={handleDateTypeChange} />
</section>
);
}