当状态改变时动态改变 Formik 中的值

如何解决当状态改变时动态改变 Formik 中的值

每次状态（称为 selectedProduct，其输入字段不包含在 Formik 标记中）更改时，我都需要更改表单字段中的值。 我试过了：

1. 将我想要的值放在 initialValues 中（显然不起作用，因为在第一次渲染时我还没有选择我的 selectedProduct）
2. 将我想要的值放入 formik 中每个字段的“值”道具中。 它几乎可以工作：Datepicker 获得正确的值，选择框输入没有获得任何值（idk 为什么），文本字段采用正确的值，但这被标签覆盖。这是因为没有一个字段经过验证。

这就是我所做的，应用了以上两点

import React,{ useState } from 'react';
import * as Yup from 'yup';
import {
  Formik,Form,ErrorMessage,Field,} from 'formik';
import {
  Button,TextField,MenuItem,} from '@material-ui/core';
import DateFnsUtils from '@date-io/date-fns';
import {
  muipickersutilsprovider,KeyboardDatePicker,} from '@material-ui/pickers';

const validationSchema = Yup.object().shape({
  startValidityDate: Yup.date().required(),discount: Yup.string().required(),days: Yup.string().required(),});

const MyComponent = ({filteredProduct,daysList}) => {

   const [selectedProduct,setSelectedProduct] = useState('');

   const onChangeProduct = (product) => {
      setSelectedProduct(product.target.value);
   };

  const handleRunButton = (newExecution) => {
     console.log(newExecution);
  };

   return (
      <div>
          <div className={classes.productComboWrapper}>
             <div id="selectBoxnotincludedInFormik">
                <TextField
                   margin="normal"
                   style={{}}
                   variant="outlined"
                   name="productId"
                   id="productId"
                   fullWidth
                   select
                   label="Select product"
                   value={selectedProduct?.id}
                   onChange={(product) => onChangeProduct(product)}
                >

                   <MenuItem key="" value="">
                      {StringsConst.noneselected}
                   </MenuItem>
                   {filteredProduct?.map((el) => (
                      <MenuItem key={el} value={el}>
                         {el.isin}
                      </MenuItem>
                   ))}
               </TextField>
            </div>
         </div>

         <Formik
            initialValues={{
               startValidityDate: selectedProduct?.startValidityDate,days: selectedProduct?.coupon?.days,discount: selectedProduct?.discount,}}
            validationSchema={validationSchema}
            onSubmit={(values) => {
               const newExecution = {
                  startValidityDate: values.startValidityDate,days: values.days,discount: values.discount,};
               handleRunButton(newExecution);
            }}
         >
            {({
               errors,dirty,setFieldValue,values,}) => (
               <Form>
                  <div className={classes.datePicker}>
                     <muipickersutilsprovider utils={DateFnsUtils}>
                        <KeyboardDatePicker
                           disabletoolbar
                           label="Start Validity Date"
                           inputvariant="outlined"
                           variant="inline"
                           autoOk
                           fullWidth
                           disabled
                           format="dd/MM/yyyy"
                           value={selectedProduct?.startValidityDate}
                           onChange={(dt) => setFieldValue('startValidityDate',dt)}
                           KeyboardButtonProps={{
                             'aria-label': 'change date',}}
                       />
                   </muipickersutilsprovider>
                 </div>

                 <div className={classes.fieldWrapper}>
                    <Field
                       className={classes.field}
                       name="discount"
                       as={TextField}
                       variant="outlined"
                       margin="normal"
                       fullWidth
                       id="discount"
                       autoComplete="discount"
                       placeholder="discount"
                       disabled
                       value={selectedProduct?.discount}
                    />
                  </div>

                 <div className={classes.textFieldWrapper}>

                    <TextField
                        margin="normal"
                        style={{}}
                        variant="outlined"
                        name="days"
                        id="days"
                        fullWidth
                        select
                        label="Days"
                        disabled
                        value={selectedProduct?.coupon?.days}
                        onChange={(val) => setFieldValue('days',val.target.value)}
                    >

                       <MenuItem key="" value="">
                          {StringsConst.noneselected}
                       </MenuItem>
                       {daysList.map((el) => (
                          <MenuItem key={el} value={el}>
                             {el}
                          </MenuItem>
                       ))}
                    </TextField>
           
                 </div>

                  <div className={classes.buttonContainer}>
                     <Button
                        type="submit"
                        fullWidth
                        variant="contained"
                        color="primary"
                        className={classes.submit}
                     >
                         {StringsConst.Run}
                     </Button>
                  </div>
        
              </Form>
           )}
        </Formik>

      </div>
   )

}

因此，表单中的三个输入字段被禁用，但是当我在表单外的第一个选择框中选择一个值时，我需要填写它们。 你能建议我另一种方法吗？

解决方法

您可以将输入或按钮连接到表单之外的表单。

喜欢这个代码：

<form id="myForm">


<button> click me </button>
</form>


<input type="text" form="myForm"/>

参考：https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#htmlattrdefform