Formik 使用 React Native Switch
Formik using React Native Switch
我的目标是在 Formik 表单中使用基于 Switch
(来自 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>
);
}
}
切换 Switch 元素似乎引发错误:undefined is not an object (evaluating '_a.type')
,在 Switch
的方法 _handleChange
中。按照 Formik 的文档,我认为我只需要在我的自定义组件的道具中传递 Formik 的 handleChange
,这样当切换 Switch
时,Formik 会改变它的状态,然后会改变道具 value
共 Switch
。
谁能帮我解决这个问题?
Formik 的 handleChange
期望用 React.ChangeEvent
调用。
由于 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>
我的目标是在 Formik 表单中使用基于 Switch
(来自 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>
);
}
}
切换 Switch 元素似乎引发错误:undefined is not an object (evaluating '_a.type')
,在 Switch
的方法 _handleChange
中。按照 Formik 的文档,我认为我只需要在我的自定义组件的道具中传递 Formik 的 handleChange
,这样当切换 Switch
时,Formik 会改变它的状态,然后会改变道具 value
共 Switch
。
谁能帮我解决这个问题?
Formik 的 handleChange
期望用 React.ChangeEvent
调用。
由于 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>