标签: formik

仅当我使用验证但不在验证模式内时才可以访问值

<Formik
        initialValues={initialValues}
        validationSchema={validationSchema(values)}
        onSubmit={actions.handleSubmit}
      >
        <Form>

如果我使用 useFormikContext(); 值在validationSchema内部不可访问，因为初始化发生在Formik之后。

如何解决这个问题呢。

我正在使用Formik我的表格。
输入之一应该由props值填充。
我该怎么做？
这是我的方法：

<input
     type="text"
     id="country"
     readOnly
     value={props.countryCode}
     // {...formik.getFieldProps("country")}
 />    

但它很可能会干扰Formik，这就是它不起作用的原因。
正确的解决方案是什么？

谢谢你！

我的 ReactJS App - CodeSandBox 链接中有以下结构。我试图通过使用 Bootstrap 模式窗口的按钮以某种方式提交 Formik 表单，但是我无法理解如何从树下的 2 个组件调用表单提交并将功能组合在一起。

有人可以建议这是否可以实现吗？

谢谢！

const TextForm: React.FunctionComponent<Props> = (props) => { 

const formError = yup.object({
    name: yup.string().required("Required"),
  });
      const formValidation = (fieldName) => {
        return {
          invalid: !!form.errors[fieldName] && form.touched[fieldName],
          invalidText: form.errors[fieldName],
          onBlur: form.handleBlur,
        };
      };  
 const form = useFormik({
        initialValues: {
          name,
          id,
        },
        formValidation
        formError,
        validateOnChange: true,
        validateOnMount: true,
        initialTouched: {},
      });
  
    return(
    <React.Fragment>
    <form>
     <TextInput
                        id="text-input-2"
                        {...validation("name")}
                        type="text"
                        name = "name"
                        onChange={(event) => {
                          setName(event.target.value);
                          form.handleChange(event);
                        }}
                      />
    <TextInput
                        id="text-input-2"
                        {...validation("id")}
                        type="text"
                        name = "id"
                        onChange={(event) => {
                          setId(event.target.value);
                        }}
                      /> …

我正在使用 Formik 来验证一些数据。当它应该创建新实体时它工作正常，但是当我想编辑实体时就会出现问题。

编辑模式必须从状态激活（this.state.edit === true），实体的数据也存储在状态上，例如 this.state.name 那里有一个字符串值。

我在渲染中放置了控制台日志，问题是日志被打印了几次，第一次在 this.sate.name 上使用空字符串，并且 this.state.edit 的值为 false。接下来打印它是正确的，此编辑为 true 并且名称包含一个值。

这是代码：

import React from 'react';
import { Redirect } from 'react-router-dom';
import { Formik, Form, Field } from 'formik';
import { Input, Button, Label, Grid } from 'semantic-ui-react';
import { connect } from 'react-redux';
import * as Yup from 'yup';
import { Creators } from '../../../actions';

class CreateCompanyForm extends React.PureComponent {
  constructor(props) {
    super(props);

    this.state = {
      name: '',
      redirectCreate: false,
      redirectEdit: false,
      edit: …

我的组件中有这些状态。

     const [initialValues, setInitialValues] = useState({
        name: "",
        name2: "",
        items: []
      });

name并name2组合在一起形成一个数组{name: 'sss', name2: 'sss'}并推送到该items数组。推动部分没问题。唯一的问题是谁删除该数组上的项目。

这是我的代码https://codesandbox.io/s/material-demo-forked-u2qzv?file=/demo.js:260-362

普通的数组方法在这里似乎不起作用。

如何修复 React 和 Formik？

我正在尝试在 ReactJS 中以 formik 形式使用 datalist。我正在尝试以 formik 形式在 datalist 选项中动态显示数组列表。所以，我做了如下：

<Formik
initialValues={initialValues}
validationSchema={AddEmployeeFormValidationSchema}
onSubmit={props.handleSubmitMethod}
>
{(formikProps) => (
  <Form onSubmit={formikProps.handleSubmit}>
  
    <div className="form-row">
      <Col>
        <FormGroup>
          <label>Designation</label>

          <Field
            type="text"
            name="designation"
            list="designations"
            id="designation"
        
          >
            <datalist id="designations">
              {props.designations.map((designation) => {
                return (
                  <option
                    value={`${designation.id}`}
                    key={`${designation.id}`}
                  >
                    {`${designation.designation_title}`}
                  </option>
                );
              })}
            </datalist>
         
          </Field>
          <ErrorMessage
            name="designation"
            component="div"
            className="text-danger"
          />
        </FormGroup>
      </Col>
     
    <div className="form-row mt-3 text-right">
      <Col>
        <Button
          className="primary-color"
          type="submit"
          disabled={!formikProps.dirty || formikProps.isSubmitting}
        >
          Submit
        </Button>
      </Col>
    </div>
  </Form>
)}
</Formik>

但它向我显示以下错误：

Error: input is a void …

我正在为我的 React 项目使用 formik 库。当必填字段为空或有任何错误时，我需要首先禁用提交按钮。我使用下面的代码检查了表单状态。

const formik = useFormik(false);

        <Formik
        initialValues={!location.state ? InvoiceInitalValues : location.state}
        validationSchema={POValidation} innerRef={formRef}
        onSubmit={(form, actions, formikHelper) => {
          console.log(form);
          console.log(formRef);
          setTimeout(() => {
            saveInvoice(form, actions, formikHelper);
            actions.setSubmitting(false);
          }, 1000);
        }}
      >
        {({
          handleSubmit,
          handleChange,
          setFieldValue,
          values,
          handleReset,
          errors,
          resetForm, isSubmitting


        }) 

我使用控制台记录的表单状态，但表单始终为“isValid：True”。请检查下图。

我也把它打印在html中。但 isValid 始终为 True。我需要这个来禁用我的按钮

打印状态

 <p> {formik.isValid=== true ? "True" : "False"} </p>

我尝试下面的代码来禁用我的按钮

<Button className="btn btn-primary mr-1" type="submit" disabled={!formik.isValid}>

提交

为什么 formik 表单有效性始终为真，即使必填字段为空。我花了更多的时间来解决这个问题。仍然无法解决这个问题。任何人都知道解决这个问题

我有一个使用 formik 和反应查询的表单。我想在成功时重置表单。

有没有办法将 resetForm 函数作为参数传递给 onSuccess ？

const mutation = useMutation(
  (newUser) =>
    axios.post(`/api/accounts`, newUser),
  {
    onSuccess: (data) => {
      alert(JSON.stringify(data));
      router.push(`/confirm-email?email=${data.email}`);
    },
    onError: (error) => {
      if (error.response && error.response.data.message) {
        openSnackbar(error.response.data.message);
      } else {
        openSnackbar('Something went wrong, please retry later');
      }
    },
  }
);

形式

<Formik
  onSubmit={(values, { setSubmitting, resetForm }) => {
    mutation.mutate(values);
    setSubmitting(false);
  }}
>
  ...
</Formik>

我收到上述错误。不知道该物体发生了什么。下面是我的对象。

export const loginValidator = yup.object({
  login: yup.string().when('password', {
    is: (v) => v < 9999 && v > 999,
    then: yup.string().required('Phone No is required').matches(phoneRegExp, 'Must be 10 digits'),
    otherwise: yup.string().email().required('Email is required'),
  }),
  password: yup.string().when('login', {
    is: (m) => phoneRegExp.test(m),
    then: yup
      .string()
      .required('Pin is Required')
      .matches(/^[0-9]+$/, 'Must be only digits')
      .min(5, 'Must be exactly 5 digits')
      .max(5, 'Must be exactly 5 digits'),
    otherwise: yup.string().required('password is required'),
  }),
});

我得到的错误

Error: Cyclic dependency, node was:"password"

这是怎么回事谢谢！！