Formik 表单中如何改变 Switch 的值？答案

【问题标题】：How change the value of a Switch in a Formik form?Formik 表单中如何改变 Switch 的值？
【发布时间】：2020-04-26 17:01:41
【问题描述】：

你知道如何在 Formik 表单中改变 Switch 的值吗？

它不像文本输入或选择器等其他字段那样工作。

<Picker onValueChange={handleChange('type')} selectedValue={values.type} style={{ height: hp('3%'), width: wp('30%') }} >...
 <TextInput onChangeText={handleChange('title')} onBlur={handleBlur('title')}...

我尝试了许多不同的方法并在 StackOverflow 中进行了响应，但我的代码不知道“设置字段值”功能

 <Switch onValueChange={ value => setFieldValue('hidden', value)} value={values.hidden} style={{ marginTop: hp('-0.5%') }}></Switch>

Formik using React Native Switch

这是 thr 形式的初始值：

initialValues={{
     title: '',
     type: 'Text',
     hidden: false,
     order: '0',
     graphicType: 'Camembert'
}}

你能帮帮我吗？

【问题讨论】：

标签： javascript reactjs react-native switch-statement formik

【解决方案1】：

使用useFormikContext检查我的自定义组件，注意值等于values[name]

function SwitchInput({ name, icon, width = "100%", placeholder }) {
  const { setFieldValue, values, errors, touched } = useFormikContext();

  return (     
     <View>
      <Switch
        trackColor={{ false: "#767577", true: "#81b0ff" }}
        thumbColor={values[name] ? "#f5dd4b" : "#f4f3f4"}
        ios_backgroundColor="#3e3e3e"
        onValueChange={(value) => setFieldValue(name, value)}
        value={values[name]}
      />
      <ErrorMessage error={errors[name]} visible={touched[name]} />
      </View>
  );
}

【讨论】：