withFormik(): 如何使用handleChange答案

【问题标题】：withFormik(): How to use handleChangewithFormik(): 如何使用handleChange
【发布时间】：2018-12-12 01:22:21
【问题描述】：

当前平台：NodeJS（最小）、客户端 React w/Redux、Formik、是的。

给出以下示例代码（不包括整个 React 组件代码，因为它与问题无关）：

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 属性传递给电子邮件或密码，因为在这些属性上没有额外的代码行为。复选框是具有特殊行为的复选框。

【问题讨论】：

不清楚你在问什么。你尝试过什么吗？该字段的自定义 onChange 与 Formik? 中的一个重叠
withFormik() 负责将 onChange 处理程序显式传递给表单内的每个输入。这就是为什么电子邮件和密码没有通过 onChange 属性传递的原因：withFormik 会为您处理更改。但是，当您确实需要在更改事件中执行某些任务时，您可以指定要调用哪个处理程序，但我不知道如何指定它。 withFormik 的配置对象只支持handleSubmit。所以我需要知道如何传入handleChange，这样我就可以持久化formik的处理并为其添加自定义代码。
您是否尝试在onChange 中放置一个处理程序？看看stackoverflow.com/questions/48466920/…
Ohhhh....不，我没有尝试在 onChange 属性中传递箭头函数...好的，我会尝试，我会回来分享结果。跨度>
是的！做到了！我会在下面发布一个答案，但我会保持打开状态，以防万一有人想出更好的东西 ;-) 谢谢伙计！

标签： reactjs formik

【解决方案1】：

您可以为复选框声明一个处理程序，并使用它！使用 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.props.handleChange(e); this.handleCheckBox(e)}} />
       </Form>
   }
}

【讨论】：

建议编辑：handleCheckBox 函数应首先调用 this.props.handleChange(e)，然后执行附加代码。这样 formik 保持链接到复选框。
好的...它确实有效，但有挫折。这是交易：（1）对 this.props.handleChange 的调用是强制性的。否则 Formik 将不会更新表单值。 (2) 不幸的是 this.props.handleChange 是异步的，没有返回 Promise 并且不支持回调参数。这意味着 Formik 正在维护自己的状态，并且无论您在该调用之后编写什么代码都太快，以至于 formik 无法在您使用其新值之前更新复选框的状态。所以最终的解决方案必须是基于扩展 Formik 的 change 函数，以便它有时间更新 val
@Arnie 您如何完成扩展 Formik 更改功能的最终解决方案？我对此感到困惑，无法提出我的问题，然后在这里找到了您的问题。
@sabliao 对于迟到的回复，我深表歉意。不幸的是，我从来没有找到这个问题的最终解决方案。我最终以另一种方式解决了我的情况：只是不使用该复选框作为我的实现的一部分。我选择使用不同的解决方案来满足对该复选框的使用并继续前进。但是，我确实在函数包装器中使用了 async/await，这样我就可以保留 formik 的函数，然后解决一些问题，但这看起来一点也不优雅，并且有其自身的问题。
您不能使用这种方法设置自定义值。

【解决方案2】：

以防万一你想处理复选框

onChange={(e, event) => {
   handleChange({ ...event, target: { name: 'isDeleted', value: e } })
}}

【讨论】：