formik

问题 Current platform: NodeJS (minimal), client-side React w/Redux, Formik, Yup. Given the following example code (not including the entire React Component code since it's irrelevant to the question): class RegisterPage extends React.Component { constructor(props) { super(props); } // (...) render () { <Form> <Field name="email" type="email" /> <Field name="password" type="password" /> <Field name="myCheckbox" type="checkbox" checked={this.props.values.myCheckbox} onChange={ ?????????? } /> </Form

问题 Current Behavior <Formik isInitialValid initialValues={{ first_name: 'Test', email: 'test@mail.com' }} validate={validate} ref={node => (this.form = node)} onSubmitCallback={this.onSubmitCallback} render={formProps => { const fieldProps = { formProps, margin: 'normal', fullWidth: true, }; const {values} = formProps; return ( <Fragment> <form noValidate> <TextField {...fieldProps} required autoFocus value={values.first_name} type="text" name="first_name" /> <TextField {...fieldProps} name=

问题 i am developing a form in reactjs using formik plugin plugin link. when i submit form i am getting text fields values but dropdown values are coming empty... this is my dropdown select <div className="form-group"> <Field component="select" id="category" name="category" value={this.state.value} className={"form-control"} onChange={ this.handleChange }> <option value="lokaler">Lokaler</option> <option value="jobb">Jobb</option> <option value="saker-ting">Saker & ting</option> <option value=

问题 I am building a form a where a user can store multiple phone numbers and set the privacy of that number (whether he wants the number to be publicly displayed or not). I have succesfully created the form but stuck in formik-yup validation and getting the values (phone number with privacy value) to further send it to backend. import React, { Component } from "react"; import { Formik, Form, Field, ErrorMessage, FieldArray } from "formik"; import * as Yup from "yup"; import DropDown from ".

问题 I successfully set react-dates with Formik under Gatsbyjs. Here you have a working demo: https://codesandbox.io/s/723l233my1 Now, my problem concerns netlify (or the way in which react-dates nest the values). So depending on the problem I have two questions: - Is Netlify able to receive nested objects on the Forms feature? - Can I tell react-dates to give me shallow values instead of nested objects? In the working demo you can see that the values (startDate and endDate) seems shallow: "values

问题 I'm confused about how to handle react-dates[DateRangePicker] onDatesChange and onFocusChange because they have two values each. onDatesChange should be able to set multiple values i.e both start date and end date. I was trying to build a custom wrapper around the daterangepicker with formik. Check console for errors `<div className="form-group"> <label>DatePickerWithFormik</label> <Field component={DatePickerWithFormik} name="DatePickerWithFormik" className="form-control" /> </div>` `export

问题 here i am providing my sample example working on codesandbox. How to reset a datepicker value after submitting a form? state = { setFieldValue: '' } onChange = (setFieldValue) => { this.setState({ setFieldValue: null }) } render() { const { values, handleSubmit } = this.props return ( <div align="center"> <Form onSubmit={handleSubmit}> <Field name="dateofbirth" label="dateOfBirth" component={DateInput} formitemlayout={formItemLayout} value={this.state.setFieldValue} onChange={this.onChange} /

问题 I am trying to use Formik + Yup to validate my form, but currently if I touch one field, and then try and submit, a field that has a minimum length will validate, and not allow me to submit. Following my code sandbox (https://codesandbox.io/s/focused-bardeen-5fiuz), I want the user to be able to submit the form if they just change the firstName field, but without entering anything for the country field. I tried both the .notRequired() and .nullable(true) params, but did not work. Any idea how

问题 I want execute a custom function when the field become valid? Something like this.. <Field name="postal-code" onValid={...} /> The reason is that I want make fetch (GET) to get address from API once the user type an valid Postal code 回答1: You can define the custom function inside the component class or outside the component. // outside the component (best suited for functional component) const onValidFn = () => { // perform action } // inside the component (best suited for stateful component)

问题 React-Select with Formik is not loading the selected value in select componenet but I'm able to get values on form submission and validation also works with Yup Here is a codesandbox demo for the same - https://codesandbox.io/s/wild-violet-fr9re https://codesandbox.io/embed/wild-violet-fr9re?fontsize=14 import React, { Component } from "react"; import { Formik, Form, ErrorMessage } from "formik"; import * as Yup from "yup"; import Select from "react-select"; const debug = true; class