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

Question

我想利用 Formik 的内部状态处理（例如， initialValues和通过字段名称引用验证）。 但是，当我尝试使用自定义onChange处理程序时，我似乎必须手动管理 select 标记的状态。 有一个更好的方法吗？

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

使用 Formik 管理 Forms 时，应避免使用 state 来管理 Form 状态。 默认情况下，Formik 提供帮助器来处理 onChange、focus 和 blur 事件。

Formik 提供的字段将为您处理更改事件。

<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>

希望这会有所帮助 - 沙盒示例