Reactjs 函数内的Formik setFieldValue

如果我有一个功能组件，并且想要在Formik标记之外设置一个值，我该如何做呢？下面是我需要进一步澄清的代码

function XYZScreen() {

    const someFunctionWithLogic = () => {
        // Set the value of the number field here...
    }
    
    return (
        <Screen>
            <Formik>
                <FormField name="number" placeholder="Number" />
             </Formik>
        </Screen>            
    );
}

函数XYZScreen（）{
const somefunction with logic=（）=>{
//在此处设置数字字段的值。。。
}
返回(
);
}

我已经将代码缩减到尽可能少的程度，以简化问题。在这个问题的背景下，这个问题可能没有意义，但我认为我的要求是明确的

如果您需要更多代码，请告诉我，如果需要，我很乐意提供。

您可以使用钩子：

import { useFormik } from 'Formik'

function XYZScreen() {

    const formikProps = useFormik({
        initialValues,
        validationSchema,
        onSubmit: yourSubmitFunction,
        ...etc
    })

    const someFunctionWithLogic = () => {
        // Set the value of the number field here:
        formikProps.setFieldValue("number", someNumber)
    }
    
    return (
        <Screen>
            {/* No need for Formik component */}
            <FormField 
                name="number" 
                placeholder="Number" 
                value={formikProps.values.number} // or whatever the value is
                onChange={formikProps.handleChange}
            />
        </Screen>            
    );
}

您可以改为使用挂钩：

import { useFormik } from 'Formik'

function XYZScreen() {

    const formikProps = useFormik({
        initialValues,
        validationSchema,
        onSubmit: yourSubmitFunction,
        ...etc
    })

    const someFunctionWithLogic = () => {
        // Set the value of the number field here:
        formikProps.setFieldValue("number", someNumber)
    }
    
    return (
        <Screen>
            {/* No need for Formik component */}
            <FormField 
                name="number" 
                placeholder="Number" 
                value={formikProps.values.number} // or whatever the value is
                onChange={formikProps.handleChange}
            />
        </Screen>            
    );
}

---

为什么不尝试使用

初始值重置表单

函数XYZScreen（）{
const[number，setNumber]=useState（）
const somefunction with logic=（）=>{
//在此处设置数字字段的值。。。
集合号（…）
}
返回(
);
}

另一个建议是将该数字传递给Formik的内部组件：


函数SomeChild（道具）{
常量{number，setFieldValue}=props；
useffect（（）=>{
setFieldValue（'number'，number）；
}，[编号]；
返回(
)
}
函数XYZScreen（）{
const[number，setNumber]=useState（）
const somefunction with logic=（）=>{
//在此处设置数字字段的值。。。
集合号（…）
}
返回(
{（道具）=>
);
}
为什么不尝试使用
初始属性重置表单

函数XYZScreen（）{
const[number，setNumber]=useState（）
const somefunction with logic=（）=>{
//在此处设置数字字段的值。。。
集合号（…）
}
返回(
);
}

另一个建议是将该数字传递给Formik的内部组件：


函数SomeChild（道具）{
常量{number，setFieldValue}=props；
useffect（（）=>{
setFieldValue（'number'，number）；
}，[编号]；
返回(
)
}
函数XYZScreen（）{
const[number，setNumber]=useState（）
const somefunction with logic=（）=>{
//在此处设置数字字段的值。。。
集合号（…）
}
返回(
{（道具）=>
);
}
使用Forkim钩子而不是组件有什么优点或缺点吗？据我所知，Formik组件是首选方式。它实际上只取决于上下文和代码的其余部分。在您的情况下，哪一种是单个组件表单，您希望在呈现/返回状态之外访问Formik方法ent，这是最好的方法。我认为
useFormik
在这一点上已经很成熟了。我非常喜欢
Formik
标签，因为你可以通过
useformiccontext
从任何子代组件访问它的所有状态和帮助函数……不过我不会说关于什么是“首选的”有一个一般规则。好吧，那就是makes sense！但是，正如您所强调的，仍然可以在子组件中使用Formik上下文吗？我问这个问题是因为我确实有访问上下文的组件。例如，我的自定义FormField组件。是的，这绝对是可能的。我编辑了我的答案。基本上，您需要创建一个仅为
Formik的包装器组件，并且formik组件的所有子组件都需要是一个单独的组件，您可以在函数体中使用
useFormikContext
。除此之外，没有简单的方法可以从组件树中的
formik
标记上方访问formik状态和帮助程序。谢谢，这就是我在描述中所做的dant组件，它工作正常。问题是我需要在Formik组件上方的函数中访问它。问题背后的原因是，条形码扫描仪组件在成功扫描后调用函数。该函数位于Formik组件上方，如问题中突出显示的。这就是我需要设置字段v的地方来自的值。我想我能做的是将setFieldValue函数作为参数传递给函数。使用Forkim钩子而不是组件有什么优点或缺点吗？据我所知，Formik组件是首选方法。它实际上只取决于上下文和您的其余代码。在您的情况下，这是一种罪恶gle组件表单如果您希望在render/return语句之外访问formik方法，这是最好的方法。我认为
useFormik
在这一点上已经非常成熟。我非常喜欢
formik
标记，因为您可以使用
useFormikContex从任何子代组件访问其所有状态和帮助函数t
…我不会说什么是“首选”有一个一般规则。好吧，这是有道理的！但是，正如您强调的，在子代组件中仍然可以使用Formik上下文吗？我问这个问题是因为我有访问上下文的组件。例如，我的自定义FormField组件。是的，这是绝对可能的e、 我编辑了我的答案。基本上，您需要创建一个包装器，它只是
Formik
组件，并且Formik组件的所有子组件都需要是一个单独的组件，您可以在函数体中使用
useformiccontext
。除此之外，没有简单的方法从上访问Formik状态和帮助程序ode>Formik
组件树中的标记。谢谢，这就是我在我的后代组件中所做的，它工作得很好。Th