是否可以在无状态组件上使用反应日期？

Question

我正在使用 Gatsbyjs 设置联系表单，需要一个日期选择器。是否可以在无状态组件上使用 react-dates？我尝试了但没有成功（因为 the instructions 指的是一个 class 组件，我真的不知道如何在这里表现）。

这是我没有反应日期的表单示例（我使用的是 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,
/>

Answer 1

尝试像这样注入 'this' 作为道具：

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

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

Answer 2

如果你想使用this那么制作功能组件不是一个好的用例，为什么不在这里制作class组件。真的很简单

Answer 3

感谢这里的回答，我解决了这个问题

我刚刚创建了一个带有日期选择器组件的组件，然后将其导入到 Formik 主页面所在的位置。这是一个工作示例：https://codesandbox.io/s/723l233my1

是否可以在无状态组件上使用反应日期？

Is it possibile to use react-dates on a stateless component?

javascript

forms

reactjs

gatsby

react-dates