withFormik (): как использовать handleChange - PullRequest
Новая
       14

withFormik (): как использовать handleChange

0 голосов
/ 03 июля 2018

Текущая платформа: NodeJS (минимальная), React на стороне клиента с Redux, Formik, Yup.

Учитывая следующий пример кода (не включая весь код 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 по электронной почте или паролю, поскольку для них не требуется никакого дополнительного поведения. Этот флажок будет иметь особое поведение.

1 Ответ

0 голосов
/ 03 июля 2018

Вы можете объявить обработчик для флажка и использовать его! Использование собственного обработчика Formkit и вашего собственного обработчика. 

class RegisterPage extends React.Component {
   constructor(props) {
      super(props);
   }
   // (...)
   handleCheckBox: (e) => {
       // do whatever you want to the value
   }
   render () {
       <Form>
           <Field name="email" type="email" />
           <Field name="password" type="password" />
           <Field 
               name="myCheckbox" 
               type="checkbox"
               checked={this.props.values.myCheckbox}
               onChange={(e) => {this.handleChange(e); this.handleCheckBox(e)}} />
       </Form>
   }
}
...