如何使用Formik调用onChange中的两个函数

问题描述

问题：

<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 pros.handleChange，另一个是自定义状态更新。

我做了这样的事情。

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

但它只调用第二个定制函数，但不会更改SELECT的字段值。我试了很多，想找出解决这个问题的办法，但我做不到。有人可以通过更正我调用函数的方式来帮助我解决这个问题吗？谢谢。

推荐答案

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

<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输入命名，如下所示，这将简化回调调用：

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