在 Formik 中创建一个带条件的变量

Question

我有下一个代码：

export const FormComponent = () => {
...
return (
   ...
 <Formik
          validationSchema={nameEmailValidationSchema}
          initialValues={{ name: '', email: '' }}
          onSubmit={(values) => {console.log(values)}}
        >
          {({
            handleChange,
            handleBlur,
            handleSubmit,
            values,
            touched,
            errors,
            isValid = false,
          }) => (
...

              {isValid && values.name && values.email ? (
                  <View style={{ paddingTop: 30 }}>
                    <AppButtonComponent
                      title="Save"
                      backgroundColor={Colors.primaryColor}
                      color={Colors.white}
                      onPress={handleSubmit}
                    />
                  </View>
                ) : null}

....
)}
        </Formik>
)

}

如何创建具有条件 isValid && values.name && values.email 的变量，例如 let showButton = isValid && values.name && values.email; 并将其粘贴到代码而不是条件中。在此先感谢您的帮助！

Answer 1

在箭头函数中你可以写成多种方式，例如

const add = (a, b) => a + b
// or
const add = (a, b) => (a + b)

此函数立即 return a + b 结果。但你不需要缩短它。你仍然可以做

const add = (a, b) => {
  return a + b;
}

所以不用

  <Formik ...yourFormikProps...>
    {({
        handleChange,
        handleBlur,
        ...
        values,
        isValid = false,
    }) => (
       <YourView>....</YourView>
    )
</Formik>

你可以做到

<Formik ...yourFormikProps...>
    {({
        handleChange,
        handleBlur,
        ...
        values,
        isValid = false,
    }) => {
       const showButton = isValid && values.name && values.email;
       return (
         <YourView>
           {showButton ? <Button>Save</Button> : null}
         </YourView>
      )
   }
</Formik>

...

在 Formik 中创建一个带条件的变量

Create a varible with condition inside Formik

reactjs

formik