javascript - Formik - 将自定义组件的自定义验证插入我当前工作的 Formik 表单

Question

我有一个带有一些文本输入和一些自定义组件的表单。我已经对文本输入进行了 Formik 验证，但对自定义组件没有进行验证。我现在正尝试将 Formik 验证添加到我的自定义 categoriesMultiselect 组件中。该组件将其数据保存在 redux 存储中。我自己处理了验证并为我的 redux Prop 添加了一个值:

const mapStateToProps = (
  state: RecordOf<VepoState>,
  ownProps: { rerenderKey: boolean }
) => ({...
    isCategoriesValid: selectIsCategoriesValid(state),
...
})

.我只想将 props.isCategoriesValid 插入到我的 Formik 表单中。

通过阅读官方文档，我想我是通过将 validate={validateCategories} 作为属性添加到自定义组件并将函数 validateCategories 添加到组件来实现的.所以我试过这样:

//above React render()
      validateCategories = () => {
        let error
        if (!this.props.selectIsCategoriesValid) {
          error = 'please select a category'
        }
        return error
      }

// Inside React render()
          <CategoriesMultiselect.View
            validate={this.validateCategories}
            name={'categories'}
            label={'Product Categories'}
            categoryCodes={[CategoryEnums.CategoryCodes.Grocery]}
          />

validateCategories 永远不会运行。这就是为什么我通过将 validateField 添加到我的输入 onChange 函数之一来测试运行它的原因:

      <Input
        label={'Product Brand'}
        value={values.brand}
        onTouch={setFieldTouched}
        error={touched.brand && errors.brand}
        placeholder="Enter Brand"
        name="brand"
        required
        onChange={() => validateField('categories')}
        deleteText={setFieldValue}
      />

当它尝试验证该字段时，我收到控制台错误:

Cannot read property 'validate' of undefined

在 Formik 中的这一行代码中:

  var validateField = useEventCallback(function (name) {
if (isFunction(fieldRegistry.current[name].validate)) {

我至少已将 Formik 插入到我的 Redux 中，因为我至少在提交表单时成功地分派(dispatch)了 Redux 操作。我做错了什么？

代码:

//@flow

import * as Yup from 'yup'
import { Formik, withFormik } from 'formik'
import { Container } from 'native-base'
import * as React from 'react'
import { ScrollView, View, Alert, Button } from 'react-native'
import { connect } from 'react-redux'
import { Category as CategoryEnums } from 'src/enums'
import type { VepoState } from 'src/components/model'
import type { RecordOf } from 'immutable'
import type { Product } from 'src/model'
import VepoHeader from 'src/components/formControls/header/view'
import { selectIsAddFormValid } from './selector'
import { selectProduct } from './selector'
// import { Button } from 'src/components/formControls'
import { ImagePicker } from 'src/components/formControls'
import LocationAutocomplete from 'src/components/formControls/locationAutocomplete/view'
import { uploadAddProduct, updateRerenderKey } from './action'
import { viewStyle } from './style'
import type { Dispatch } from 'redux'
import { updateAddProductImage } from './action'
import type { Place } from 'src/model/location'
import { Colors, Spacing } from 'src/styles'
import { Input } from 'src/components/formControls'
import { onPress } from './controller'
import { CategoriesMultiselect } from 'src/components/formControls'
import {
  selectIsGrocerySelected,
  selectIsCategoriesValid,
  isLocationValid
} from 'src/components/product/add/groceryItem/selector'

const mapStateToProps = (
  state: RecordOf<VepoState>,
  ownProps: { rerenderKey: boolean }
) => ({
  locationListDisplayed: state.formControls.root.locationListDisplayed,
  isAddFormValid: selectIsAddFormValid(state),
  // $FlowFixMe
  product: selectProduct(state),
  // $FlowFixMe
  isGrocerySelected: selectIsGrocerySelected(state),
  // $FlowFixMe
  categories: state.formControls.categories,
  isCategoriesValid: selectIsCategoriesValid(state),
  image: state.product.add.image,
  rerenderKey: ownProps.rerenderKey,
  location: state.formControls.location,
  isLocationValid: isLocationValid(state)
})

// eslint-disable-next-line flowtype/no-weak-types
const mapDispatchToProps = (dispatch: Dispatch<*>): Object => ({
  updateAddProductImage: (value): void => {
    dispatch(updateAddProductImage({ value }))
  },
  uploadAddProduct: (product: Product): void => {
    dispatch(uploadAddProduct(product))
  },
  updateRerenderKey: () => {
    dispatch(updateRerenderKey())
  }
})

export const getLocationIsValid = (place: Place): boolean => {
  return Object.keys(place).length > 0 ? true : false
}
type AddGroceryStoreState = {
  name: string,
  brand: string,
  description: string,
  price?: number
}

class AddGroceryItemView extends React.Component<any, AddGroceryStoreState> {
  validateCategories = () => {
    let error
    if (!this.props.selectIsCategoriesValid) {
      error = 'please select a category'
    }
    return error
  }
  render() {
    const {
      values,
      handleSubmit,
      setFieldValue,
      errors,
      touched,
      setFieldTouched,
      isValid,
      isSubmitting,
      validateField
    } = this.props
    return (
      <Container>
        <VepoHeader title={'Add Vegan Grocery Product'} />
        <Container style={container}>
          <ScrollView
            keyboardShouldPersistTaps="always"
            style={viewStyle(this.props.locationListDisplayed).scrollView}>
            <View>
              <LocationAutocomplete
                label={'Grocery Store'}
                placeHolder={'Enter Grocery Store'}
              />
            </View>
            <View style={viewStyle().detailsContainer}>
              <ImagePicker
                label={'Product Image (optional)'}
                image={this.props.image.image}
                updateAddProductImage={this.props.updateAddProductImage}
                updateRerenderKey={this.props.updateRerenderKey}
              />
              <Input
                label={'Product Name'}
                onTouch={setFieldTouched}
                value={values.name}
                placeholder="Enter Name"
                name="name"
                required
                error={touched.name && errors.name}
                deleteText={setFieldValue}
                onChange={setFieldValue}
              />
              <Input
                label={'Product Brand'}
                value={values.brand}
                onTouch={setFieldTouched}
                error={touched.brand && errors.brand}
                placeholder="Enter Brand"
                name="brand"
                required
                onChange={() => validateField('categories')}
                deleteText={setFieldValue}
              />
              <View>
                <Input
                  label={'Product Description'}
                  value={values.description}
                  placeholder="Enter Description"
                  multiline={true}
                  required
                  onTouch={setFieldTouched}
                  error={touched.description && errors.description}
                  numberOfLines={4}
                  name="description"
                  deleteText={setFieldValue}
                  onChange={setFieldValue}
                />
                <Input
                  isValid={true}
                  isPrice={true}
                  label={'Product Price'}
                  value={values.price}
                  onTouch={setFieldTouched}
                  error={touched.price && errors.price}
                  placeholder="Enter Price"
                  name="price"
                  deleteText={setFieldValue}
                  onChange={setFieldValue}
                />
                <View>
                  <CategoriesMultiselect.View
                    validate={this.validateCategories}
                    name={'categories'}
                    label={'Product Categories'}
                    categoryCodes={[CategoryEnums.CategoryCodes.Grocery]}
                  />
                </View>
              </View>
            </View>
          </ScrollView>
        </Container>
        <Button
          title="submit"
          onPress={handleSubmit}
          disabled={!isValid || isSubmitting}
          loading={isSubmitting}
        />
        {/* <Button.View onSub={this._handleSubmit} onPress={this._handleSubmit} label={'GO!'} /> */}
      </Container>
    )
  }
}

const container = {
  flex: 1,
  ...Spacing.horizontalPaddingLarge,
  backgroundColor: Colors.greyLight,
  flexDirection: 'column'
}

const formikEnhancer = withFormik({
  validationSchema: Yup.object().shape({
    name: Yup.string().required(),
    brand: Yup.string().required(),
    categories: Yup.array(),
    description: Yup.string()
      .min(9)
      .required(),
    price: Yup.number()
      .typeError('price must be a number')
      .required()
  }),
  mapPropsToValues: () => ({
    name: '',
    brand: '',
    description: '',
    price: '',
    categories: []
  }),
  handleSubmit: (values, { props }) => {
    props.updateRerenderKey()
  },
  displayName: 'AddGroceryItemView'
})(AddGroceryItemView)

// $FlowFixMe
const AddGroceryItemViewComponent = connect(
  mapStateToProps,
  mapDispatchToProps
)(formikEnhancer)

export default AddGroceryItemViewComponent

根据 Rikin 的要求，这是 CategoriesMultiselect 组件:

//@flow
import type { Node } from 'react'
import { selectSelectedCategory } from 'src/components/product/add/groceryItem/selector'
import type { VepoState } from 'src/components/model'
import type { RecordOf } from 'immutable'
import { connect } from 'react-redux'
import * as React from 'react'
import { View } from 'react-native'
import {
  List,
  ListItem,
  Text,
  Left,
  Body,
  Right,
  Button,
  Container,
  Label,
  Title,
  Content
} from 'native-base'
import Icon from 'react-native-vector-icons/FontAwesome'
import Eicon from 'react-native-vector-icons/EvilIcons'
import Modal from 'react-native-modal'
import SelectMultiple from 'react-native-select-multiple'
import {
  updateAlertModalIsOpen,
  updateAlertModalHasYesNo,
  updateAlertModalMessage,
  updateAlertModalTitle
} from 'src/components/formControls/alertModal/action'
import * as C from './model'
import type { Subcategory } from 'src/model/category'

import * as controller from './controller'
import { getIsCategoriesValid } from './controller'
import { styles } from 'src/components/style'
import {
  Colors,
  Corners,
  Distances,
  Modals,
  Spacing,
  Typography,
  ZIndexes
} from 'src/styles'
import { Containers } from '../../../styles'
import {
  toggleSubcategory,
  setAllShowSubcategoriesToFalse,
  toggleShowSubcategories
} from './action'
import type { Dispatch } from 'redux'

const mapStateToProps = (state: RecordOf<VepoState>) => ({
  vepo: state,
  // $FlowFixMe
  selectedCategory: selectSelectedCategory(state),
  categories: state.formControls.categories
})

// eslint-disable-next-line flowtype/no-weak-types
const mapDispatchToProps = (dispatch: Dispatch<*>): Object => ({
  setAllShowSubcategoriesToFalse: (): void => {
    dispatch(setAllShowSubcategoriesToFalse())
  },
  toggleSubcategory: (sc): void => {
    return dispatch(toggleSubcategory(sc))
  },
  toggleShowSubcategories: (c): void => {
    dispatch(toggleShowSubcategories(c))
  },
  updateAlertModalIsOpen: (isOpen: boolean): void => {
    dispatch(updateAlertModalIsOpen(isOpen))
  },
  updateAlertModalMessage: (message: string): void => {
    dispatch(updateAlertModalMessage(message))
  },
  updateAlertModalHasYesNo: (hasYesNo: boolean): void => {
    dispatch(updateAlertModalHasYesNo(hasYesNo))
  },
  updateAlertModalTitle: (title: string): void => {
    dispatch(updateAlertModalTitle(title))
  }
})

const renderCategoryRow = (props: C.CategoriesViewProps, item: C.Category) => {
  return (
    <View>
      <ListItem
        style={listItem}
        icon
        onPress={() => controller.categoryClicked(props, item)}>
        <Left>
          <Icon
            style={styles.icon}
            name={item.icon}
            size={20}
            color={item.iconColor}
          />
        </Left>
        <Body style={[styles.formElementHeight, border(item)]}>
          <Text style={Typography.brownLabel}>{item.label}</Text>
        </Body>
        <Right style={[styles.formElementHeight, border(item)]}>
          <Eicon style={catStyle.arrow} name="chevron-right" size={30} />
        </Right>
      </ListItem>
    </View>
  )
}
const getCategoriesToDisplay = (props) => {
  const y = props.categories.filter((x) => props.categoryCodes.includes(x.code))
  return y
}

class CategoriesMultiselectView extends React.Component {
  setFormCategories = () => {
    if (this.props && this.props.setFieldValue) {
      this.props.setFieldValue(
        'categories',
        controller.getSelectedSubcategories(this.props.categories)
      )
    }
  }

  render(): React.Node {
    const categoriesToDisplay = getCategoriesToDisplay(this.props)
    return (
      <View>
        <View style={{ ...Containers.fullWidthRow }}>
          <Label disabled={false} style={Typography.formLabel}>
            {this.props.label}
          </Label>
          <View style={{ ...Containers.fullWidthRow }} />
          <Label disabled={false} style={Typography.formLabel}>
            {controller.getNumberOfSelectedSubcategories(this.props.categories)}{' '}
            Selected
          </Label>
        </View>
        <View
          style={catStyle.categoriesViewStyle(this.props, categoriesToDisplay)}>
          {this.props.categories && this.props.categories.length > 0 && (
            <List
              listBorderColor={'white'}
              style={categoriesListStyle}
              dataArray={categoriesToDisplay}
              renderRow={(item: C.Category) => {
                return renderCategoryRow(this.props, item)
              }}
            />
          )}
          <View style={catStyle.modalConatinerStyle} />
          <Modal
            style={catStyle.modal}
            onModalHide={this.setFormCategories}
            isVisible={
              this.props.categories
                ? this.props.categories.some((cat: C.Category) =>
                    controller.showModal(cat)
                  )
                : false
            }>
            <Container style={catStyle.modalView}>
              <View style={Modals.modalHeader}>
                <Title style={catStyle.categoriesTitleStyle}>
                  {controller.getDisplayedCategoryLabel(this.props.categories)}
                </Title>
                <Right>
                  <Button
                    transparent
                    icon
                    onPress={this.props.setAllShowSubcategoriesToFalse}>
                    <Eicon name="close-o" size={25} color="#FFFFFF" />
                  </Button>
                </Right>
              </View>
              <Content style={catStyle.categoryStyle.modalContent}>
                <SelectMultiple
                  checkboxSource={require('../../../images/unchecked.png')}
                  selectedCheckboxSource={require('../../../images/checked.png')}
                  labelStyle={[
                    styles.label,
                    styles.formElementHeight,
                    styles.modalListItem
                  ]}
                  items={controller.getDisplayedSubcategories(
                    this.props.categories
                  )}
                  selectedItems={controller.getSelectedSubcategories(
                    this.props.categories
                  )}
                  onSelectionsChange={(selections, item: Subcategory) => {
                    this.props.toggleSubcategory({ subcategory: item }).the
                  }}
                />
              </Content>
            </Container>
          </Modal>
        </View>
        {this.props.error && (
          <Label
            disabled={false}
            style={[
              Typography.formLabel,
              { color: 'red' },
              { marginBottom: Spacing.medium }
            ]}>
            {this.props.error}
          </Label>
        )}
      </View>
    )
  }
}

const catStyle = {
  // eslint-disable-next-line no-undef
  getBorderBottomWidth: (item: C.Category): number => {
    if (item.icon === 'shopping-basket') {
      return Spacing.none
    }
    return Spacing.none
  },
  // eslint-disable-next-line no-undef
  categoriesViewStyle: (props: C.CategoriesViewProps, categoriesToDisplay) => {
    return {
      backgroundColor: Colors.borderLeftColor(
        getIsCategoriesValid(props.categories)
      ),
      ...Corners.rounded,
      paddingLeft: Spacing.medium,
      height: Distances.FormElementHeights.Medium * categoriesToDisplay.length,
      overflow: 'hidden',
      borderBottomWidth: Spacing.none
    }
  },
  arrow: {
    color: Colors.brownDark,
    borderBottomColor: Colors.brownDark
  },
  icon: { height: Distances.FormElementHeights.Medium },
  // eslint-disable-next-line no-undef
  categoriesTitleStyle: {
    ...styles.title,
    ...Typography.titleLeftAlign
  },
  categoryStyle: {
    modalContent: {
      ...Corners.rounded
    }
  },
  modal: {
    flex: 0.7,
    height: 20,
    marginTop: Spacing.auto,
    marginBottom: Spacing.auto
  },
  modalView: {
    backgroundColor: Colors.white,
    height: 500,
    ...Corners.rounded
  },
  modalConatinerStyle: {
    marginBottom: Spacing.medium,
    color: Colors.brownDark,
    backgroundColor: Colors.brownLight,
    position: 'absolute',
    zIndex: ZIndexes.Layers.Negative,
    right: Spacing.none,
    height: Distances.Distances.Full,
    width: Distances.Distances.Full,
    ...Corners.rounded
  }
}

const categoriesListStyle = {
  flex: Distances.FlexDistances.Full,
  color: Colors.brownDark,
  backgroundColor: Colors.brownLight,
  height: Distances.FormElementHeights.Double,
  ...Corners.notRounded,
  marginRight: Spacing.medium
}

const border = (item: C.Category) => {
  return {
    borderBottomWidth: catStyle.getBorderBottomWidth(item),
    borderBottomColor: Colors.brownMedium
  }
}

const listItem = {
  height: Distances.FormElementHeights.Medium
}

// $FlowFixMe
const CategoriesMultiselect = connect(
  mapStateToProps,
  mapDispatchToProps
)(CategoriesMultiselectView)

export default CategoriesMultiselect

Answer 1

通过直接在表单 categories 中设置属性并带有错误消息的表单级别验证用法示例。

...
...
...

const validateCategories = (values, props) => {
    let error = {}
    if (!props.selectIsCategoriesValid) {
      error.categories = 'please select a category'
    }
    return error
  }

class AddGroceryItemView extends React.Component<any, AddGroceryStoreState> {

  render() {
    const { ... } = this.props
    return (
      <Container>
        <VepoHeader title={'Add Vegan Grocery Product'} />
        <Container style={container}>
          <ScrollView
            keyboardShouldPersistTaps="always"
            style={viewStyle(this.props.locationListDisplayed).scrollView}>
            <View>
              ...
            </View>
            <View style={viewStyle().detailsContainer}>
              ...
              <View>
                ...
                <View>
                  <CategoriesMultiselect.View
                    // validate={this.validateCategories}
                    name={'categories'}
                    label={'Product Categories'}
                    categoryCodes={[CategoryEnums.CategoryCodes.Grocery]}
                  />
                </View>
              </View>
            </View>
          </ScrollView>
        </Container>
        ...
      </Container>
    )
  }
}

...

const formikEnhancer = withFormik({
  validationSchema: Yup.object().shape({
    ...
  }),
  mapPropsToValues: () => ({
    ...
  }),
  handleSubmit: (values, { props }) => {
    ...
  },
  displayName: 'AddGroceryItemView',
  validate: validateCategories
})(AddGroceryItemView)

// $FlowFixMe
const AddGroceryItemViewComponent = connect(
  mapStateToProps,
  mapDispatchToProps
)(formikEnhancer)

export default AddGroceryItemViewComponent

使用 Formik 的 Field 更新字段级验证:

但是我个人会选择表单级别验证作为你依赖的第一道防线- 在 validationSchema 通过测试后，您可以在其中放置自定义消息传递的级别。如果您在现场级别进行操作，那么您可能最终会陷入困境，这可能会导致难以维护组件并针对应用程序中的各个场景对其进行自定义。对我来说，表单级验证在一个方便的地方就足够明确了，可以进行所有额外的字段级验证。或者，您也可以将所有 validationSchema 和表单级验证函数放在一个文件中，然后将其导入到您要包装 withFormik HOC 的主要组件中。

无论哪种方式，都取决于您的需求。

这是官方文档链接:https://jaredpalmer.com/formik/docs/guides/validation#field-level-validation

并且按照那个:

Note: The / components' validate function will only be executed on mounted fields. That is to say, if any of your fields unmount during the flow of your form (e.g. Material-UI's unmounts the previous your user was on), those fields will not be validated during form validation/submission.

//@flow
...
import SelectMultiple from 'react-native-select-multiple'
...
import {
  toggleSubcategory,
  setAllShowSubcategoriesToFalse,
  toggleShowSubcategories
} from './action'
...
import { Field } from 'formik'

...

class CategoriesMultiselectView extends React.Component {
  setFormCategories = () => {
    if (this.props && this.props.setFieldValue) {
      this.props.setFieldValue(
        'categories',
        controller.getSelectedSubcategories(this.props.categories)
      )
    }
  }

  render(): React.Node {
    const categoriesToDisplay = getCategoriesToDisplay(this.props)
    return (
      <View>
        <View style={{ ...Containers.fullWidthRow }}>
          ...
        </View>
        <View
          style={catStyle.categoriesViewStyle(this.props, categoriesToDisplay)}>
          {...}
          <View style={catStyle.modalConatinerStyle} />
          <Modal
            style={catStyle.modal}
            onModalHide={this.setFormCategories}
            isVisible={
              this.props.categories
                ? this.props.categories.some((cat: C.Category) =>
                    controller.showModal(cat)
                  )
                : false
            }>
            <Container style={catStyle.modalView}>
              <View style={Modals.modalHeader}>
                ...
              </View>
              <Content style={catStyle.categoryStyle.modalContent}>
                <Field name="categories" validate={validate_Function_HERE_which_can_be_via_props_or_locally_defined} render={({field, form}) =>
                  <SelectMultiple
                    checkboxSource={require('../../../images/unchecked.png')}
                    selectedCheckboxSource={require('../../../images/checked.png')}
                    labelStyle={[
                      styles.label,
                      styles.formElementHeight,
                      styles.modalListItem
                    ]}
                    items={controller.getDisplayedSubcategories(
                      this.props.categories
                    )}
                    selectedItems={controller.getSelectedSubcategories(
                      this.props.categories
                    )}
                    onSelectionsChange={(selections, item: Subcategory) => {
                      this.props.toggleSubcategory({ subcategory: item }).the
                    }}
                  />}
                />
              </Content>
            </Container>
          </Modal>
        </View>
        {this.props.error && (
          <Label
            disabled={false}
            style={[
              Typography.formLabel,
              { color: 'red' },
              { marginBottom: Spacing.medium }
            ]}>
            {this.props.error}
          </Label>
        )}
      </View>
    )
  }
}

...

// $FlowFixMe
const CategoriesMultiselect = connect(
  mapStateToProps,
  mapDispatchToProps
)(CategoriesMultiselectView)

export default CategoriesMultiselect