React Formik：如何在不手动处理状态的情况下使用自定义 onChange？

Question

I want to make use of Formik's internal state handling (eg initialValues and referencing validation via field name). However, when I try to use a custom onChange handler, I seem to have to manually manage state for the select tag. Is there a better way to do this?

state = {
    selectedType: ''
};

handleForm = (val) => {
    // do something else
    this.setState({selectedType: val});
};


<Formik
    initialValues={{
        type: ''
    }}
    
    validate={
        (values) => {
            const errors = {};
            
            if (!values.type) {
                errors.type = "Select a value";
            }
            
            return errors;
        }
    }

    onSubmit={
        (values) => {
            // getting undefined...
            console.log(values.type);
        }
    }
>
    <Form>
        <Field name="type" as="select" value={this.state.selectedType} onChange={(event) => this.handleForm(event.target.value)}>
            <option disabled></option>
            <option value="Email">Email</option>
            <option value="Text">Text</option>
            <option value="Phone">Phone</option>
        </Field>

        <button type="submit">Submit</button>
    </Form>
</Formik>

Answer 1

when using Formik for managing Forms , we should avoid using state to manage the Form state . Formik by default provides helpers which takes care of the onChange, focus and blur events .

Field provided by Formik will handle the change events for you .

<Field id="type" name="type" as="select">
      <option disabled></option>
      <option value="Email">Email</option>
      <option value="Text">Text</option>
      <option value="Phone">Phone</option>
</Field>

Hope this helps - sandbox example