formik

问题 I have a modal form with a form that uses Formik . Here are two pictures that show two states of that form that can be toggled with a switch.Initially I fill text into fields which can be added dynamically and stored as an array with . The second picture shows how I toggled to textarea . There you can also add text with commas that will be turned into an array. Is there any way to fill data in input fields from the first screen, toggle into textarea and access already inputted data. I

问题 I have a form that creates an event using Formik library. I need to check to see if the start date overlaps the end date and vice-versa. I have two date pickers that choose the date and time. How can I use Yup to validate this and show an error message if they do overlap? Thanks for the help in advance const validationSchema = Yup.object().shape({ eventName: Yup.string() .min(1, "Must have a character") .max(10, "Must be shorter than 255") .required("Must enter an event name"), email: Yup

问题 As the title said. I have a stateless component based on react-bootstrap-typeahead and a form wizard based on the formik multi-step wizard example found in the docs. However, I am unable to pass the values I got from the typeahead component into formik . I can't access setFieldValue . const FormElements = setFieldValue => ( <Wizard initialValues={FORM_VALUES} onSubmit={(values, actions) => { sleep(300).then(() => { window.alert(JSON.stringify(values, null, 2)); actions.setSubmitting(false); }

问题 I am trying to use Material UI radio buttons with Formik, and they are not clicking properly. I've reduced the problem to the following example: https://codesandbox.io/s/amazing-currying-s5vn0 If anyone knows what I might be doing wrong, or if there is a bug in either system, then please let me know. When clicking on the buttons in the above example, they do not stay clicked. I have a more complex react functional component that uses other library components, so I cannot include it here. It

问题 Was wondering if Formik has a native solution for identifying the addition and deletion (and update) of FieldArray in the form ? I have the code on sandbox here https://codesandbox.io/s/jn7x2m75o9 ( based on the original Formik Array example @ https://github.com/jaredpalmer/formik/blob/master/examples/Arrays.js ) but also the relevant part here : With an Initial state of 3 friend defined, how can I know in my onSubmithandler which one were modified,deleted,updated . import React from "react";

问题 Is there a way to pass formik form values from a child component to a parent component and handle form submission in parent component only. I have a use case where I'm building a form for restaurant. The form will have many many fields. So I grouped them and created seperate smaller formik forms component. All the child components' validation schema (yup) are written there inside the child component. Or if there is any another method to accomplish this task, please let me know. class

问题 In Formik, I try to use {...formik.getFieldProps('email')} on my input field instead of using value, onChange, and onBlur. But it's not working. This works : <input id="email" name="email" type="text" value={formik.values.email} onChange={formik.handleChange} onBlur={formik.handleBlur} /> But this doesn't : <input id="email" type="text" {...formik.getFieldProps("email")} /> Code is here : https://codesandbox.io/s/formik-pb-with-getfieldprops-83tze?fontsize=14 Any ideas ? Thanks ! 回答1: As

问题 I have this function handleChangeButton = (e) => { alert(e.target.value) this.props.setFieldValue('degreeLevel', e.target.value); } and in my component render, I have <div className="twelve columns"> <p>Degree Level</p> <Button variant="raised" label="Default" onClick = { this.handleChangeButton } value="Doctorate" > Doctorate </Button> <Button variant="raised" label="Default"> Masters </Button> <Button variant="raised" label="Default"> Undergraduate </Button> </div> So, what I want to do is,

问题 I'm building an app in React Native. We recently started using TypeScript in the app and my task is to migrate the unit tests. There is one test that is miracously failing. The app has a <LoginForm /> that uses Formik. //... imports export interface FormValues { email: string; password: string; } export interface Props { navigation: NavigationScreenProp<any, any>; } export default class LoginForm extends Component<Props, object> { handleSubmit = (values: FormValues, formikBag: FormikActions

问题 Here i am creating Datepicker with antd and passing this antd datepicker to formik field.My sample code for Datepicker with antd import React from "react"; import { Form, DatePicker } from "antd" import { Field } from "formik"; import moment from 'moment'; const FormItem = Form.Item; function onChange(date, dateString) { console.log(date, dateString); } const dateFormat = "MM-DD-YYYY" // Here i am adding antd error message through DateInput const DateInput = ({ field, form: { touched, errors