如何使用 Formik 在 onchange 中调用两个函数答案

【问题标题】：How to call two function in onchange using Formik如何使用 Formik 在 onchange 中调用两个函数
【发布时间】：2020-04-23 09:43:30
【问题描述】：

问题：

我在我的 Formik 表单中选择了输入以做出反应。我的代码如下

<select
    className="form-control offence-select"
    id="exampleFormControlSelect1"
    value={props.values.offenceId}
    onChange={props.handleChange("offenceId")}
    onBlur={props.handleBlur("offenceId")}
 >
     <option value={0}>Select Offence</option>
         {this.renderOption()}
 </select>

我想要的是在 onChange 中调用两个函数，一个是 formik props.handleChange，下一个是自定义状态更新。

我做了这样的事情。

onChange={e=>{props.handleChange("offenceId");this.handleOffence(props.values.offenceId)}}

但它只调用了第二个自定义函数，并没有改变选择的字段值。我尝试了很多方法来解决这个问题，但我无法做到。有人可以通过纠正我调用函数的方式来帮助我解决这个问题吗？谢谢。

【问题讨论】：

从外观上看，我猜props.handleChange 是一个返回函数的函数。那么在onChange处理程序中手动调用时，不应该是{e=>{props.handleChange("offenceId")(e.target.value);}之类的吗？

标签： reactjs formik

【解决方案1】：

您也必须传递事件，否则您的回调不知道新值是什么。我也不会指望props.values 立即获得新值，这就是为什么我会在第二个函数调用中传递来自事件的值。

<select
    className="form-control offence-select"
    id="exampleFormControlSelect1"
    value={props.values.offenceId}
    onChange={(e) => {
      props.handleChange("offenceId")(e);
      this.handleOffence(e.currentTarget.value);
    }}
    onBlur={props.handleBlur("offenceId")}
 >
     <option value={0}>Select Offence</option>
         {this.renderOption()}
 </select>

您还可以为您的选择输入命名如下，这简化了回调调用：

<select
    name="offenceId"
    className="form-control offence-select"
    id="exampleFormControlSelect1"
    value={props.values.offenceId}
    onChange={(e) => {
      props.handleChange(e);
      this.handleOffence(e.currentTarget.value);
    }}
    onBlur={props.handleBlur}
 >
     <option value={0}>Select Offence</option>
         {this.renderOption()}
 </select>

【讨论】：

PS：props.handleChange("offenceId")(e) 记住(e) 这很重要

【解决方案2】：

试试看：

<select
    className="form-control offence-select"
    id="exampleFormControlSelect1"
    value={props.values.offenceId}
    onChange={() => {
      props.handleChange("offenceId");
      this.handleOffence(props.values.offenceId);
    }}
    onBlur={props.handleBlur("offenceId")}
 >
     <option value={0}>Select Offence</option>
         {this.renderOption()}
 </select>

【讨论】：