Formik 使用 React Native Switch答案

【问题标题】：Formik using React Native SwitchFormik 使用 React Native Switch
【发布时间】：2019-01-29 13:50:35
【问题描述】：

我的目标是在 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')，在 _handleChange 的 Switch 方法中。按照Formik的文档，我想我只需要在我的自定义组件的道具中传递Formik的handleChange，这样当Switch被切换时，Formik会改变它的状态，然后会改变@的道具value 987654331@。有人可以帮我解决这个问题吗？

【问题讨论】：

标签： reactjs react-native formik

【解决方案1】：

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>

【讨论】：