Как импортировать выбранное dateValue (с помощью средства выбора дня реакции) в другой файл, который находится на том же уровне иерархии ReactJS? - PullRequest
Новая
       13

Как импортировать выбранное dateValue (с помощью средства выбора дня реакции) в другой файл, который находится на том же уровне иерархии ReactJS?

0 голосов
/ 17 января 2020 
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. Сохранение происходит в файле CalendarForm ниже. Возможно глупый и простой c вопрос, но я боролся с ним. 

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. Сохранение происходит в файле CalendarForm ниже. Возможно глупый и простой c вопрос, но я застрял с ним.

1 Ответ

0 голосов
/ 18 января 2020

Вам необходимо сделать 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); 
     }
  // ...
};
...