标签: formik

我创建了一个在后端存储值的 formik 表单。我有设置重置按钮，初始值。一切工作正常。但我无法找到一种在提交表单后禁用 formik 表单的方法，即如果用户在单击提交按钮后填写表单，则用户无法单击文本字段。

// @ts-ignore

import React, { useState, useEffect } from 'react';
import { Formik, Form, Field } from 'formik';
import { Typography, Button, Grid } from '@material-ui/core';
import * as Yup from 'yup';
import { MyInput } from './comman/MyInput';
import { Textarea } from './comman/Textarea';
import { Event } from '../Tracking/Event';

const contactSchema = Yup.object().shape({
  name: Yup.string().required('Please Enter Your Name'),
  email: Yup.string()
    .email('Please enter a valid email address')
    .required('Please enter an email address'),
  number: Yup.string()
    .min(10, …

我想在 formik 之外使用我在 formik 中使用的 TouchableOpacity。我不知道如何在 formik 函数之外使用 handleSubmit'。

\n

在不使用 useFormik 的情况下我该如何做到这一点

\n

}\n_handleSubmit = (values) =>{\n\n  const user = firebase.auth().currentUser.uid;\n  if(user){\n    const profileData = firebase.database().ref('kullaniciBilgiler/'+`${user}`);\n    profileData.update({\n      age:values.age,\n      cinsiyet:values.cinsiyet,\n      email:values.email,\n      job:values.job,\n      liveCity:values.liveCity,\n      name:values.name,\n      school:values.school,\n      schoolLevel:values.schoolLevel,\n      surname:values.surname,\n    }).then(()=>console.log('i\xc5\x9flem tamam usta'))\n  }\n  alert('ba\xc5\x9far\xc4\xb1l\xc4\xb1 dirim!');\n  \n\n}\n\n\n\n  render() {\n\n\n\n    return (\n\n      <SafeAreaView style={styles.container} >\n       \n        <View style={styles.profilePhoto}>\n        <TouchableOpacity  onPress={this.selectFile} >\n        <Image\n            source={{\n              \n              uri:  this.state.fileUri,   \n             // this.state.urlPP\n            }}\n            style={styles.profPhoto}\n          />\n           </TouchableOpacity>\n          \n         \n        </View>\n        \n        <View style={styles.profileDetails}>\n        <View style={{flex:1, alignSelf:'center', …

我正在向用户显示登录屏幕。该登录屏幕（或者公平地说，整个应用程序）可以以不同的语言显示。

语言切换适用于除验证错误之外的所有 UI 组件。

目前，如果用户将电子邮件/密码字段留空，或输入无效的电子邮件地址，收到错误消息，然后切换语言，则错误消息不会更改为新语言。

经过大量的猜测和实验，我已经达到了这样的程度：在单击“de”或“en”按钮两次，然后在输入中键入后，语言会发生变化。

我一生都无法找到 useState 和 useEffect 挂钩的正确组合，以使验证消息在点击任一语言按钮后立即翻译。

以下代码：

import React, { useState, useEffect } from 'react'
import { Link } from 'react-router-dom'
import { Formik, Field, Form, ErrorMessage } from 'formik'
import * as Yup from 'yup'
import { useTranslation } from 'react-i18next'
import { accountService, alertService } from '@/_services'

function Login({ history, location }) {
  //'common' is defined in i18n.js under init's namespace ('ns:') option
  //if that's not set, use useTranslation('common'), or whatever the name …

将 Reactjs 与打字稿结合使用

我想将 useFormik 挂钩传递给组件道具。

这样做的原因是为了减少不必要的线路并增加重用。

我当前的代码

...
const formik = useFormik({
    initialValues: { userName: ''},
    validationSchema,
    onSubmit: (values) => {}
})

return (
  <Form>
    {/* A place to make a component. */}
    <Text
       id="userName"
       fullWidth
       label="Name"
       defaultValue={formik.values.userName}
       onChange={formik.handleChange}
       onBlur={formik.handleBlur}
       error={formik.touched.userName && Boolean(formik.errors.userName)}
       helperText={formik.touched.userName && formik.errors.userName}
    >
    {/* A place to make a component. */}
  </Form>
)

自定义组件，这是问题的要点。

interface props {
    id: string;
    formik : what, // How do I deliver the prop here?
  }

const TextFieldCustom = ({ …

我在 React 项目中使用 Formik 表单。我里面有以下代码<Formik><Form>

<Field name="zip" validate={some validation is here}>
       <input {...fieldProps.field}
               id="zip"
               name="zip"
               className="form-control"
               placeholder="zip"
               required={true}
               maxLength={5}
               onKeyDown={(event) => this.onZipChange(event)}/>
</Field>
<ErrorMessage name="zip" render={msg => <div>{msg}</div>} />

当表单呈现时，我对输入进行更改，例如，从 zip 中删除一个数字，因此在 props.formProps.errors 中会出现错误文本，但 ErrorMessage 未显示。在我单击页面的任何位置后，它会出现，然后它会继续按预期工作：如果 zip 中出现任何错误，则按下按键时会显示 ErrorMessage，如果 zip 有效则隐藏。

仅当第一次呈现表单时才会出现问题。任何想法，什么会导致这个问题？

我正在使用react-select和formik使用自动填充文本框构建表单。

<Formik
    initialValues={{
        assignedTo: task.assignedTo,
    }}
    onSubmit={(values) => {
        const updatedTask = { ...task, ...values };
        editTask(updatedTask);
    }}
    render={({ handleSubmit, handleChange, values }) => (
        <form>
            <Select type="text" name="assignedTo" options={options} onChange={handleChange} value={{ value: task.assignedTo, label: task.assignedTo }} />
        </form>
    })
/>

引发错误 Cannot read property 'type' of undefined

如何解决此问题并在Formik中处理react-select？

我有一个下拉选择组件。该组件显示我们从服务器获取的元素的值。在以下架构中：

[
  {label: 1, value: 1},
  {label: 2, value: 2},
  {label: 3, value: 3},
]

我正在使用 Formik 并映射数据，以获取值。问题是，我没有占位符值，因此用户认为该值已被选中。

我正在阅读 formik 示例，但我没有创建任何类似的东西。

这是一个工作示例，来自 formik 示例

我试图强制占位符作为一种选择，但这不起作用。有任何想法吗？

          <div className="py-3">
              <label>
                <span className="font-weight-bold">Select Group</span>
                <span className="text-danger">*</span>
              </label>
              <Field
                name="group"
                component="select"
                placeholder="Select Group (Just one)"
                className={classNames('form-control', {
                  'is-invalid': errors.group && touched.group
                })}
              >
                {groups.map(group => (
                  <option key={group.label} value={group.value}>
                    {group.value}
                  </option>
                ))}
              </Field>
              {errors.group && touched.group ? (
                <div className="text-danger">{errors.group}</div>
              ) : null}
            </div>

目前，组具有从服务器返回的第一项的初始值。

我想显示占位符，就像上面的代码一样。这个placeholder="Select Group (Just one)"

我想使用 Formik 和 Yup 创建动态表单。按下加号按钮时，应添加新的输入。但是，当我创建验证架构时，onSubmit 方法没有调用。当我删除validationSchema时，我可以在控制台中看到日志。

这是我的代码：

interface Props {
    data?: string;
    onSubmit?: Function
}

interface IFormValues {
    people: {name: string, surname: string}[]
}


const FieldComponent = ({field, form: { touched, errors }}) => {
    const error = getIn(errors, field.name);
    const touch = getIn(touched, field.name);
    return (
        <div>
            <input type="text" name={field.name} onChange={field.onChange}/>
            {touch && error ? <p>{error}</p> : null}
        </div>
    )
}

const FieldArrayComponent = (arrayHelpers) => (
    <div>
        {arrayHelpers.form.values.people.map((person, index) => (
            <div key={index}>
                <Field name={`people.${index}.name`} component={FieldComponent}/>
                <Field name={`people.${index}.surname`} …

我有一个用于更新以前数据“姓名、电子邮件、年龄等”的屏幕。我第一次调用一个从服务器名称获取数据的函数getProfileData()

用户写入新数据后，我为该“更新配置文件”发送 POST 请求

它是成功的，但在那之后，我想用新数据重新渲染这个表单，所以我调用该getProfileData()函数来获取新数据，但它无法重新渲染输入值！它只是仍然使用以前的数据

我也尝试过，componentDidUpdate()但遗憾的是没有重新渲染:)

那么我该如何解决呢？

代码

getProfileData = async () => {
    let USER_TOKEN =
      '....';
    let AuthStr = `Bearer ${USER_TOKEN}`;
    let response = await API.get('/profile', {
      headers: {Authorization: AuthStr},
    });
    let {
      data: {data},
    } = response;
    let password = '';
    let password_confirmation = '';
    let {name, email, avatar, age, gender, country_id} = data;
    let initialValues = [];
    initialValues.push({
      name,
      password,
      password_confirmation,
      email,
      avatar,
      age,
      gender,
      country_id,
    });
    this.setState({initialValues: initialValues, loading: false}, …

我想在我现有的 Formik 表单中添加 tinymce 富文本编辑器。

之前：

          <Field name='description'>
              {({ field, meta }) => (
                <div>
                   <textarea
                    id='article_body'
                    type='text'
                    rows='15'                  
                    placeholder='Write description...'
                    {...field}
                   ></textarea> 
                 </div>
            </Field>

现在：

      <Field name='description'>
         {({ field, meta }) => (
           <div>
            <Editor
                id='article_body'
                apiKey='my-api-key'
                initialValue='Write...'
                init={{
                  height: 500,
                  menubar: true,
                  plugins: [
                    'advlist autolink lists link image charmap print preview anchor',
                    'searchreplace visualblocks code fullscreen',
                    'insertdatetime media table paste code help wordcount',
                  ],
                  toolbar:
                    'undo redo | formatselect | bold italic backcolor |  alignleft aligncenter 
                     alignright …

我有一个包含复选框的表单，如果是，true则会出现一个新字段。

我希望当该字段可见时，它可以被视为必需的，如果它不可见，则可以将其视为必需的。

这里endComment应该required只有当show是true

你有解决办法吗？

全局代码：

 const Form = {
   const [show, setShow] = useState<boolean>(props.event.endDate ? true : false);
   const addEndComment = (value: boolean) => {
     setShow(value);
   };

const schema = yup.object().shape({
    comment: yup.string().required(),
    endComment: yup.string().required(),
});

    return (
        <>
            <Formik
                enableReinitialize
                initialValues={{
                    comment: props.event.comment,
                    endComment: props.event.endComment,
                }}
                onSubmit={(values) => {
                  ....
                }}
                validationSchema={schema}
            >
                {(formikProps) => (
                    <form onSubmit={formikProps.handleSubmit}>
                        <section>
                            <p>
                                <I18nWrapper
                                    translateKey={'event.form-create-event.explanations'}
                                />
                            </p>
                        </section>
                        <section>
                            <Form.Group controlId="eventComment">
                                <Form.Label>
                                    <I18nWrapper …

调试我使用 Formik 在 React/TS 中构建的基本 TODO 列表应用程序的问题。

主要问题是，当我单击“删除项目”按钮时，它在不应该的情况下调用 onSubmit 处理程序，当然会给出错误：“Uncaught TypeError：无法在 updateProjectNameInState 读取未定义的属性（读取“任务”）” ...当然不能，因为它应该被删除。我从来没有打算让 onSubmit 发生在这里，但由于某种原因它确实发生了。

难道是因为我props.handleClick()在删除函数中调用该函数？（此handleClick函数旨在更新父组件中的状态以卸载表单组件。）

Formik 组件代码：

（粘贴整个代码以获取上下文，但有问题的按钮位于底部附近）

import React, {useContext} from "react";
import { AllContext } from "../App";
import { Formik, Field, Form, FormikHelpers, ErrorMessage } from 'formik';
//schemas
import { conditionalEditProjectNameSchema } from "../schemas";
import * as yup from "yup";

//types
interface Values {
    projectName: string;
  }


export default function EditProjectForm(props: any){
    const {allProjects, selectedProject, currentTask} = React.useContext(AllContext);
    const [allProjectsCopy, setAllProjects] = allProjects; …