时间戳

首页 > 解决方案 > 如何手动将 Formik 字段重置为空（反应）

javascript - 如何手动将 Formik 字段重置为空（反应）

问题描述

我需要Field手动重置它的值，例如在一些已经存在的点击事件上我想将值设置assignedProductId为空！

这是字段：

  <Field
        name="assignedProductId"
        component={Dropdown}
        options={this.state.Products}
        loading={this.state.isLoading}
        onChange={this.onProductChange}
     />

我不知道如何访问该字段并手动重置它的值...我红了setFieldValue，但我不确定如何访问此字段，所以我可能会设置它的新值..

多谢你们

干杯

标签： javascriptreactjsjsx

解决方案

正如您所建议的，您应该使用setFieldValue. 它的签名是：

setFieldValue: (field: string, value: any, shouldValidate?: boolean) => void

该field属性是您的字段的名称。并且value应该是null。

像这样：

props.setFieldValue('assignedProductId',null)

在此处阅读文档：https ://jaredpalmer.com/formik/docs/api/formik#setfieldvalue-field-string-value-any-shouldvalidate-boolean-void

编辑

要更新组件内部的值并安装：

class MyComponent extends React.Component {
    constructor(props){
        super(props);
    }

    componentDidMount(){
        this.props.setFieldValue('assignedProductId',null);
    }

    render(){
        ...
    }
}

推荐阅读