问题描述
问题:
我在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>