如何将一个拾取的日期值(使用反应日选择器)导入到另一个位于同一层次结构级别ReactJS的文件?

Question

import React, { useState } from 'react';
import DayPickerInput from 'react-day-picker/DayPickerInput';
import 'react-day-picker/lib/style.css';
import 'react-datepicker/dist/react-datepicker.css'
const DayPicker = () => {
const [day, setDay] = useState('')
console.log('you picked:', day)
return (
<div>
Please give date:
{/*<DayPickerInput onDayChange={day => console.log(day.getDate(), day.getMonth() + 1, day.getFullYear())} /> */}
<DayPickerInput onDayChange={day => setDay(day)} 
/>
{/*<div>pickedDate:{day}</div> */}
</div>
);
}
export default DayPicker

从这个 DayPicker，我还需要获得日期(天( 最好以合适的格式选择以将其存储到MongoDB。存储发生在下面的日历窗体文件上。也许是一个愚蠢而基本的问题，但我一直在努力解决这个问题。

import React from 'react'
import { connect } from 'react-redux'
import Togglable from './Togglable'
import { useField } from '../hooks'
import { createCalendar } from '../reducers/calendarReducer'
import { Form } from 'semantic-ui-react'
import PropTypes from 'prop-types'
import DayPicker from './DayPicker'
const CalendarForm = props => {
const author = useField('author')
const title = useField('title')
const url = useField('url')
const date = useField('date')
const handleCalendarCreation = async (event) => {
// console.log('you picked', pickedDate)
event.preventDefault()
const calendarObject = {
title: title.value,
author: author.value,
url: url.value,
date: date.value     // pickedDate needed HERE
}
try {
await props.createCalendar(calendarObject)
title.reset()
author.reset()
url.reset()
date.reset()
props.notify(`a new dancecalendar '${calendarObject.title}' successfully added`)
} catch (exception) {
// props.notify(`${exception.response.data.error}`, true)
props.notify(`${exception}`, true)
}
}
const omitReset = (hook) => {
let { reset, ...hookWithoutReset } = hook
return hookWithoutReset
}
return (
<Togglable buttonLabel='add'>
<div>
<Form onSubmit={event => handleCalendarCreation(event)}>
<Form.Field>
<label>title</label>
<input id="title" data-cy="title" {...omitReset(title)} />
</Form.Field>
<Form.Field>
<label>author</label>
<input id="author" data-cy="author" {...omitReset(author)} />
</Form.Field>
<Form.Field>
<label>url</label>
<input id="url" data-cy="url" {...omitReset(url)} />
</Form.Field>
<Form.Field>
<DayPicker />
{/*date:<input id="url" data-cy="date" {...omitReset(date)} /> */}
</Form.Field>
<button type='submit' data-cy="Add">Add</button>
</Form>
</div>
</Togglable>
)
}
CalendarForm.propTypes = {
notify: PropTypes.func.isRequired,
}
const mapStateToProps = state => {
return {
user: state.user,
calendar: state.calendar,
users: state.users
}
}
const mapDispatchToProps = {
createCalendar
}
export default connect(mapStateToProps, mapDispatchToProps)(CalendarForm) 

从这个 DayPicker，我还需要获得日期(天( 最好以合适的格式选择以将其存储到MongoDB。存储发生在下面的日历窗体文件上。也许是一个愚蠢而基本的问题，但我一直坚持下去。

Answer 1

您需要使 CalendarForm 成为一个类，将选取日期添加到其状态中，并向 DayPicker 提供一个回调函数来设置状态变量。这样：

class CalendarForm extends React.Component {
constructor(props) {
super(props);
this.state = { date: null }; // or something
this.setDate.bind(this);
}
setDate(date) {
this.setState({ date });
}
render() {
return (
{/* ... */}
<DayPicker setDate={this.setDate} />
{/* ... */}
);
}
const DayPicker = props => {
// ....
onDayChange={day => {
setDay(day);
props.setDate(day); 
}
// ...
};