Я только начал изучать ReactJS и хочу написать простое приложение с DatePicker. Моя идея состоит в том, чтобы создать компонент с именем Селектор даты и времени (Дочерний компонент) с DatePicker и вызывать Селектор даты и времени в App.js (Родительский компонент) несколько раз (по крайней мере, чтобы указать дату начала и окончания).
И я застрял в поднятии состояния от дочернего к родительскому компоненту.
Вот мой код:
1) Компонент DateTimeSelector (дочерний)
...
export default function DateTimeSelector(props) {
const [value, setValue] = React.useState(null);
function onChangeHandler(newValue) {
setValue(newValue);
console.info(newValue);
}
return (
<LocalizationProvider dateAdapter = {AdapterDateFns}>
<DatePicker label = {props.text}
value = {value}
onChange = {onChangeHandler}
renderInput = {(params) => <TextField {...params} />}
/>
</LocalizationProvider>
);
}
2) Основной (родительский) компонент
В этом компоненте я хочу вывести значения каждого компонента DateTimeSelector в консоль и, например, распечатать эти значения в .
Теперь в консоли я вижу только значения из моего компонента Селектор даты и времени, но не из родителя.
Итак, мой вопрос: как передать значения даты из DatePickers в родительский компонент в качестве переменных состояния: startDate и endDate?
...
function App() {
const [startDate, setStartDate] = React.useState(null);
const [endDate, setEndDate] = React.useState(null);
function startDateChangeHandler(value) {
setStartDate(value);
console.info(startDate);
}
function endDateChangeHandler(value) {
setEndDate(value);
console.info(endDate);
}
return (
<Container>
<Grid container spacing = {2}>
<Grid item xs = {3}>
<div>
<DateTimeSelector text='Start Date'
value = {startDate}
onChange = {startDateChangeHandler} />
</div>
<div>
<DateTimeSelector text='End Date'
value = {endDate}
onChange = {endDateChangeHandler}/>
</div>
</Grid>
<Grid item xs = {9}>
<div><p>Start Date: {startDate ? JSON.stringify(startDate) : null}</p>
<p>End Date: {endDate ? JSON.stringify(endDate) : null}</p>
</div>
</Grid>
</Grid>
</Container>
);
}
export default App;
отсутствие потребности в ребенке. вы можете сослаться на этот ссылка на код
Я не вижу содержимого в файле DateTime.js по вашей ссылке.
Я нашел решение! Спасибо за совет не иметь состояния в Child!
DateTimeSelector (дочерний)
export default function DateTimeSelector(props) {
function onChangeHandler(date) {
props.onChange(date);
}
return (
<LocalizationProvider dateAdapter = {AdapterDateFns}>
<DatePicker label = {props.text}
value = {props.date}
onChange = {onChangeHandler}
renderInput = {(params) => <TextField {...params} />}
/>
</LocalizationProvider>
);
}
Приложение (родительское)
function App() {
const [startDate, setStartDate] = React.useState(null);
const [endDate, setEndDate] = React.useState(null);
function startDateChangeHandler(date) {
console.info('startDateChangeHandler');
setStartDate(date);
console.info(startDate);
}
function endDateChangeHandler(date) {
console.info('endDateChangeHandler');
setStartDate(date);
console.info(endDate);
}
return (
<Container>
<Grid container spacing = {2}>
<Grid item xs = {3}>
<div>
<DateTimeSelector text='Start Date'
date = {startDate}
onChange = {startDateChangeHandler} />
</div>
<div>
<DateTimeSelector text='End Date'
date = {endDate}
onChange = {endDateChangeHandler}/>
</div>
</Grid>
<Grid item xs = {9}>
<div>
<p id='start_date'>Start Date: {startDate ? JSON.stringify(startDate) : null}</p>
<p id='end_date'>End Date: {endDate ? JSON.stringify(endDate) : null}</p>
</div>
</Grid>
</Grid>
<Button variant = "contained">Hello World!</Button>
</Container>
);
}
Я использую компоненты Material UI (mui.com/components/date-picker/#main-content), и во всех примерах есть setState().