Можно ли использовать даты реакции на компоненте без состояния? - PullRequest
Новая
       39

Можно ли использовать даты реакции на компоненте без состояния?

0 голосов
/ 16 апреля 2019

Я устанавливаю контактную форму с Gatsbyjs и мне нужен сборщик дат. Можно ли использовать даты реакции на компоненте без состояния? Я пытался, но безуспешно (так как инструкция относится к компоненту класса, я действительно не знаю, как вести себя здесь).

Это пример моей формы без дат реакции (я использую Formik): 

import React from 'react'
import { Formik, Form, Field, ErrorMessage } from 'formik'

function encode(data) {
    return Object.keys(data)
        .map(key => encodeURIComponent(key) + "=" + encodeURIComponent(data[key]))
        .join("&");
}

const ContactForm = () => (
    <>
        <h1>TITLE</h1>
        <Formik
            initialValues={{ email: '', name: '', start: '', end: '', message: '' }}
            onSubmit={(values) => {
                fetch("/", {
                    method: "POST",
                    headers: { "Content-Type": "application/x-www-form-urlencoded" },
                    body: encode({
                        "form-name": "contact",
                        ...values
                    })
                })
                .then(() => alert("Thanks!"))
                .catch(error => alert(error))
            }}
        >
                {({ isSubmitting }) => (
                <Form name="contact" data-netlify="true" action="/grazie">
                    <input type="hidden" name="form-name" value="contact" />
                        <label>
                            <Field type="text" name="name" placeholder="Name and Surname" />
                            <ErrorMessage name="name" component="div" />
                        </label>
                    <br />
                        <label>
                            <Field type="email" name="email" placeholder="Email" required />
                            <ErrorMessage name="email" component="div" />
                        </label>
                    <br />
                    <button type="submit" disabled={isSubmitting}>Send</button>
                </Form>
                )}
        </Formik>
</>
)

export default ContactForm

Теперь, так как это компонент без состояния, я не могу добавить {this.etc.etc}, поэтому я не знаю, как настроить даты реакции. Вот код, который я должен добавить: 

<DateRangePicker
  startDate={this.state.startDate} // momentPropTypes.momentObj or null,
  startDateId="your_unique_start_date_id" // PropTypes.string.isRequired,
  endDate={this.state.endDate} // momentPropTypes.momentObj or null,
  endDateId="your_unique_end_date_id" // PropTypes.string.isRequired,
  onDatesChange={({ startDate, endDate }) => this.setState({ startDate, endDate })} // PropTypes.func.isRequired,
  focusedInput={this.state.focusedInput} // PropTypes.oneOf([START_DATE, END_DATE]) or null,
  onFocusChange={focusedInput => this.setState({ focusedInput })} // PropTypes.func.isRequired,
/>

Ответы [ 3 ]

0 голосов
/ 16 апреля 2019

Если вы хотите использовать this, тогда создавать функциональные компоненты не очень хорошо, почему бы не создать здесь компоненты класса.Это будет действительно легко

0 голосов
/ 18 апреля 2019

Я решил это благодаря этому ответу здесь https://stackoverflow.com/a/55454138/2232626

Я просто создал компонент с компонентом выбора даты, а затем импортировал его туда, где находится главная страница Formik.Вот рабочий пример: https://codesandbox.io/s/723l233my1

0 голосов
/ 16 апреля 2019

Попробуйте ввести 'this' в виде реквизита: 

 const ContactForm = (props) => ( ...
      // props.that ....
 )

 // call it where you need it
 <ContactForm  
     that = {this}  
     ... 
 > 
    ...
 </ContactForm>
...