我的目标是Switch
在 Formik 表单中使用基于(来自 React Native)的自定义组件。下面是表单组件的代码:
class NewPreferences extends React.Component {
render() {
return(
<View style={styles.mainContainer}>
<View style={styles.newPreferencesContainer}>
<Formik
initialValues={{
food: true
}}
onSubmit={async (values, action) => {
await this.props.onSubmitPress(values)
action.setSubmitting(false)
}}
render={({
values,
errors,
touched,
handleChange,
handleBlur,
handleSubmit,
isSubmitting,
}) => (
<View style={styles.formikNewPreferences}>
<View style={styles.itemRow}>
<Field
source={images.food.uri}
onChange={handleChange('food')}
value={values.food}
name="food"
component={ToggleButton}
/>
</View>
<TouchableOpacity
style={styles.button}
onPress={handleSubmit}
disabled={isSubmitting}
>
<Text>Login</Text>
</TouchableOpacity>
</View>
)}
/>
</View>
</View>
);
}
该组件ToggleButton
如下所示:
class ToggleButton extends React.Component<ToggleButtonInterface> {
render() {
return(
<View>
<Image
source={this.props.source}
/>
<Switch
onValueChange={this.props.onChange}
value={this.props.value}
/>
</View>
);
}
}
似乎undefined is not an object (evaluating '_a.type')
在 的方法_handleChange
中切换 Switch 元素会引发错误:Switch
。继Formik的文件,我想我只是需要通过Formik的handleChange
在我的自定义组件的props,这样当Switch
被触发,Formik改变其状态,那么这将改变propsvalue
的Switch
。有人可以帮我解决这个问题吗?