Formik - 将自定义组件的自定义验证插入我当前工作的 Formik 表单
Formik - Plug custom validation for custom component into my currently working Formik form
我有一个带有一些文本输入和一些自定义组件的表单。我已经对文本输入进行了 Formik 验证，但对自定义组件没有进行验证。我现在正在尝试将 Formik 验证添加到我的自定义 categoriesMultiselect 组件中。该组件将其数据保存在 redux 存储中。我自己处理了验证并为我的 redux 道具添加了一个值：
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 函数之一来测试 运行ning 它：
<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 中，因为我至少在提交表单时成功地调度了 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
直接在表单 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 通过测试后，您可以在其中放置自定义消息传递的级别。如果您在现场级别进行操作，那么您可能最终会陷入困境，这可能会导致难以维护组件并针对应用程序中的各个场景对其进行自定义。对我来说，表单级验证在一个方便的地方就足够明确了，可以进行所有额外的字段级验证。或者，您也可以将所有 validationSchema 和表单级验证函数放在一个文件中，然后将其导入您要包装 withFormik HOC.
的主要组件中
根据您的要求，您可以选择哪种方式。
这是官方文档link：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
我有一个带有一些文本输入和一些自定义组件的表单。我已经对文本输入进行了 Formik 验证，但对自定义组件没有进行验证。我现在正在尝试将 Formik 验证添加到我的自定义 categoriesMultiselect 组件中。该组件将其数据保存在 redux 存储中。我自己处理了验证并为我的 redux 道具添加了一个值：
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 函数之一来测试 运行ning 它：
<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 中，因为我至少在提交表单时成功地调度了 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
直接在表单 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 通过测试后，您可以在其中放置自定义消息传递的级别。如果您在现场级别进行操作，那么您可能最终会陷入困境，这可能会导致难以维护组件并针对应用程序中的各个场景对其进行自定义。对我来说，表单级验证在一个方便的地方就足够明确了，可以进行所有额外的字段级验证。或者，您也可以将所有 validationSchema 和表单级验证函数放在一个文件中，然后将其导入您要包装 withFormik HOC.
根据您的要求，您可以选择哪种方式。
这是官方文档link：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