Question

当前平台：NodeJS（最小），带有Redux，Formik，Yup的客户端React。

给出以下示例代码（由于与问题无关，因此不包括整个React Component代码）：

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

const handleFormSubmission = (values, { resetForm, setErrors, setSubmitting }) => {
    console.log(values);
};

const handleFormChange = (event) => {
    event.persist();
    console.log('changed');
};

const MyFormik = withFormik({
    mapPropsToValues ({ email, password, myCheckbox }) {
        return {
            email: email || '',
            password: password || '',
            myCheckbox: myCheckbox || false
       }
    },
    validationSchema: (...Yup schema here...),
    handleSubmit (values, bag) { return handleFormSubmission(values, bag); }
})(RegisterPage);

export default connect()(MyFormik);

... 如何使用handleChange方法？我需要保留原始代码（来自Formik的代码），同时添加处理该复选框更改的代码。某些组件的行为取决于该复选框的选中值。

请注意，我没有将onChange属性传递给电子邮件或密码，因为在代码或密码上没有多余的行为。该复选框具有特殊的行为。

Answer 1

您可以为复选框声明一个处理程序，并使用它！使用Formkit的本机处理程序和您的自定义处理程序。

2.23.0

withFormik（）：如何使用handleChange

1 个答案: