第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

為了賬號安全,請及時(shí)綁定郵箱和手機(jī)立即綁定
已解決430363個(gè)問題,去搜搜看,總會有你想問的

在 Formik Form 上更新 initialValues 道具不會更新輸入值

在 Formik Form 上更新 initialValues 道具不會更新輸入值

寶慕林4294392 2022-12-22 10:09:27
我像這樣使用帶有前向引用的 formik 形式表單.jsimport React from "react";import FormikWithRef from "./FormikWithRef";const Form = ({  formRef,  children,  initialValues,  validationSchema,  onSubmit}) => {  return (    <FormikWithRef      validateOnChange={true}      validateOnBlur={true}      initialValues={initialValues}      validationSchema={validationSchema}      onSubmit={onSubmit}      ref={formRef}    >      {(props) => <form onSubmit={props.handleSubmit}>{children}</form>}    </FormikWithRef>  );};export default Form;FormikWithRef.jsimport React, { forwardRef, useImperativeHandle } from "react";import { Formik } from "formik";function FormikWithRef(props, ref) {  let _formikProps = {};  useImperativeHandle(ref, () => _formikProps);  return (    <Formik {...props}>      {(formikProps) => {        _formikProps = formikProps;        if (typeof props.children === "function") {          return props.children(formikProps);        }        return props.children;      }}    </Formik>  );}export default forwardRef(FormikWithRef);我有一些選項(xiàng)卡更新easy-peasy商店?duì)顟B(tài),當(dāng)我選擇第二個(gè)選項(xiàng)卡時(shí),我想用 Formik 表單type更新輸入值(最初來自商店?duì)顟B(tài)),但更新特定于該組件的狀態(tài)作為prop 傳遞給組件。valueinitialValuesinitialValuesFormik
查看完整描述

2 回答

?
暮色呼如

TA貢獻(xiàn)1853條經(jīng)驗(yàn) 獲得超9個(gè)贊

如果您希望輸入的值在更改時(shí)更改initialValues,則需要將Formikprop enableReinitializeas傳遞給組件true。


因此,您需要在代碼中更改的是將 propTabsForm.js傳遞給您的組件FormenableReinitialize


<Form

  enableReinitialize

  initialValues={initialValues}

  onSubmit={onFormSubmit}

  formRef={formRef}

>

  <FieldWrapper>

    <MoneyBox name="input" currencySymbol={"£"} />

  </FieldWrapper>

</Form>

在您Form.js將道具傳遞給Formik組件時(shí)


const Form = ({

  formRef,

  children,

  initialValues,

  validationSchema,

  onSubmit,

  enableReinitialize

}) => {

  return (

    <FormikWithRef

      enableReinitialize={enableReinitialize}

      validateOnChange={true}

      validateOnBlur={true}

      initialValues={initialValues}

      validationSchema={validationSchema}

      onSubmit={onSubmit}

      ref={formRef}

    >

      {(props) => <form onSubmit={props.handleSubmit}>{children}</form>}

    </FormikWithRef>

  );

};

我不太確定您的業(yè)務(wù)邏輯應(yīng)該如何工作,但這是一個(gè)包含上述更改的工作示例。


查看完整回答
反對 回復(fù) 2022-12-22
?
不負(fù)相思意

TA貢獻(xiàn)1777條經(jīng)驗(yàn) 獲得超10個(gè)贊

解決方案 CodeSandbox


它被稱為initialValues,那么為什么您希望它在您更改它時(shí)更新表單值呢?(但是你可以通過使用 prop 來要求它這樣做enableReinitialize,正如@Vencovsky 在另一個(gè)答案中提到的那樣。)


要將您想要的值(value.input在easy-peasy商店中)綁定到 formik 輸入,您可以使用:


const [field, meta, helpers] = useField(props);

useEffect(() => {

  helpers.setValue(value.input)

}, [value])

每次value店內(nèi)更改時(shí),它都會更新 formik 輸入字段的值。


并且要更改存儲狀態(tài)的值,您可以使用設(shè)置選項(xiàng)卡的方式。(使用easy-peasy商店。)


在 CodeSandbox 上運(yùn)行

在 中的第 49 行Tabs.js,它會在單擊選項(xiàng)卡時(shí)更新值。


在 中的第 19 行Input.js,它將輸入值綁定到您的存儲狀態(tài)。


查看完整回答
反對 回復(fù) 2022-12-22
  • 2 回答
  • 0 關(guān)注
  • 112 瀏覽
慕課專欄
更多

添加回答

舉報(bào)

0/150
提交
取消
微信客服

購課補(bǔ)貼
聯(lián)系客服咨詢優(yōu)惠詳情

幫助反饋 APP下載

慕課網(wǎng)APP
您的移動學(xué)習(xí)伙伴

公眾號

掃描二維碼
關(guān)注慕課網(wǎng)微信公眾號