如何使用Formik調用onChange中的兩個函數 [英] How to call two function in onchange using Formik

問題描述

問題：

我在Reaction中選擇了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 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>

這篇關于如何使用Formik調用onChange中的兩個函數的文章就介紹到這了，希望我們推薦的答案對大家有所幫助，也希望大家多多支持IT屋！