[英]Formik using React Native Switch
My goal is to use a custom component based on Switch
(from React Native) in a Formik form. 我的目标是以Formik形式使用基于
Switch
的自定义组件(来自React Native)。 Here is the code of the form component: 这是表单组件的代码:
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>
);
}
The component ToggleButton
is the following one: 组件
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>
);
}
} }
It appears that toggling the Switch element raises an error: undefined is not an object (evaluating '_a.type')
, in the method _handleChange
of Switch
. 看来,切换所述开关元件产生一个错误:
undefined is not an object (evaluating '_a.type')
,在该方法_handleChange
的Switch
。 Following the documentation of Formik, I thought I simply needed to pass Formik's handleChange
in the props of my custom component, so that when Switch
is toggled, Formik changes its state, which will then change the props value
of Switch
. 遵循Formik的文档,我认为我只需要在自定义组件的props中传递Formik的
handleChange
,以便在Switch
时,Formik更改其状态,然后将更改Switch
的props value
。 Could anyone help me on this issue? 有人可以帮我解决这个问题吗?
Formik's handleChange
expects to be called with a React.ChangeEvent
. Formik的
handleChange
希望用被称为React.ChangeEvent
。 Since the onValueChange
of the Switch
component will just be invoked with a boolean you need to use Formik's setFieldValue
to handle the change. 由于
Switch
组件的onValueChange
将仅用布尔值调用,因此您需要使用Formik的setFieldValue
来处理更改。
<Formik
initialValues={{ switch: false }}
onSubmit={ values => console.log(values) }
>
{props => (
<Switch
value={props.values.switch}
onValueChange={value =>
props.setFieldValue('switch', value)
}
/>
)}
</Formik>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.