如何在 Formik 中设置文本字段的值？

Question

How to Set The Value In TextField with Conditon in Formik? Basically I want to select the name and then this name is automatically set to the TextField but I cant find the proper way to do it, Can Anybody Please Help:!! Thanks In Advance :)))))))))))))

This is TextField Component

import React from 'react';
import TextField from '@mui/material/TextField'
import { useField } from 'formik';

const TextfieldWrapper = ({
  name,
  ...otherProps
}) => {
  const [field, mata, helpers] = useField(name);

  const configTextfield = {
    ...field,
    ...otherProps,
    fullWidth: true,
    variant: 'outlined',
    margin: "normal",
    size: 'small'
  };

  if (mata && mata.touched && mata.error) {
    configTextfield.error = true;
    configTextfield.helperText = mata.error;
  }

  return (

    <TextField
      sx={{
        "& .MuiInputBase-root": {
          height: 45

        }
      }}
      {...configTextfield}
    />

  );
};

export default TextfieldWrapper;

and This is Dashboard Component

      <Formik
        enableReinitialize={true}
        initialValues={{ ...initialFormState }}
        validationSchema={formValidation}
    
        onSubmit={(values, { resetForm }) => {
          console.log(values);
          valueSheet.postSheet();
          setShow(false);
    
    
          resetForm({ values: '' });
    
          setTimeout(() => {
            window.location.reload(false);
          }, 2000);
    
    
    
        }}
    
    
    
      >
<Form>
              <div>

                      <TextfieldWrapper
                        name='sheetNo'
                        inputRef={valueSheet.sheetName}
                        label="New Sheet Name"


                      />



                    </div>

</Form>

Answer 1

I have to confess I am not so sure what you wanna achieve. But useField hook gets a string or a configuration object as its argument. You can use it to set its initial value.

const [field, meta, helpers] = useField({
  name,
  value,
});

Now you can pass the value down to the component.

<TextfieldWrapper
  name='sheetNo'
  inputRef={valueSheet.sheetName}
  label="New Sheet Name"
  value={value}
/>

Reference