Javascript 如何在React Native中对Formik、Yup、Ui Kitten使用复选框和单选按钮

我正在我的应用程序中使用Formik和yup作为表单。我无法用Formik实现复选框，实现了这一点，但它不适用于我。下面是我迄今为止尝试过的代码。实现此解决方案后，当我单击复选框时，表单变得无效，提交按钮不会调用

handleSubmit

方法。我还尝试使用

React Native Elements

而不是

UI Kitten

，但结果是一样的

const validationSchema = Yup.object().shape({

  service_charge_status: Yup.boolean(),//.oneOf([true], 'Please check the agreement'),
  documents_status: Yup.boolean(), //.oneOf([true], 'Please check the agreement'),
  security_number: Yup.string()
    .label('Security Number *')
    .required('Security Number is required'),
  note: Yup.string().label('Note')


    })
    handleSubmit = (values: any) => {
    console.log('AD Values', values);
  }

  render() {
    return (
      <Formik
        initialValues={{
          // id: '',
          service_charge_status: false,
          documents_status: false,
          security_number: '',
          note: '',
          security_personel_number: ''
        }}
        onSubmit={values => { this.handleSubmit(values) }}
        validationSchema={validationSchema}
      >
        {({ handleChange,
          values,
          handleSubmit,
          errors,
          isValid,
          isSubmitting,
          touched,
          handleBlur,
          setFieldValue }
        ) => (<ScrollView>
          <Header
            noBackButton={true}
            navigation={this.props.navigation}
            title="Approve Request"
          />
          <Layout style={{ padding: 20 }}>
            <View style={{ marginVertical: 5 }}>
              <Text category="p1" style={{ marginVertical: 5 }}>
                Requester Type
            </Text>
              <View style={{ flexDirection: 'row' }}>
                <RadioGroup
                  selectedIndex={this.state.requestTypeIndex}
                  onChange={(index) => this.setState({ requestTypeIndex: index })}                >
                  <Radio
                    text="New Issue"
                    textStyle={styles.labelColor}
                    // checked={values.is_new_issue}
                    status="warning"
                  />
                  <Radio
                    text="Replacement"
                    textStyle={styles.labelColor}
                    // checked={values.is_replacement}
                    // onChange={handleChange('is_replacement')}
                    status="warning"
                  />
                </RadioGroup>
              </View>
            </View>
            <View style={{ marginVertical: 5 }}>
              <Text category="p1" style={{ marginVertical: 5 }}>
                Check List
            </Text>
              <Layout style={{ marginVertical: 6 }}>
                <CheckBox

                  text="Service Charges"
                  textStyle={styles.labelColor}
                  status="warning"
                  checked={values.service_charge_status}
                  onChange={(val) => setFieldValue('service_charge_status', !values.service_charge_status)}

                />
              </Layout>

              <Layout style={{ marginVertical: 6 }}>
                <CheckBox

                  text="Documents Verification"
                  textStyle={styles.labelColor}
                  status="warning"
                  checked={values.documents_status}
                  onChange={(val) => setFieldValue('documents_status', !values.documents_status)}
                />
              </Layout>
            </View>
            <View style={{ marginVertical: 5 }}>
              <Text category="p1" style={{ marginVertical: 5 }}>
                Security Personel Number *
            </Text>
              <Input
                placeholder="Enter Security personel number"
                size='small'
                multiline={true}
                status={touched.security_personel_number ? !errors.security_personel_number ? 'success' : 'danger' : 'warning'}
                caption={(touched.security_personel_number && errors.security_personel_number) ? errors.security_personel_number : ''}
                value={values.security_personel_number}
                onChangeText={handleChange('security_personel_number')}
              />
              <Text category="p1" style={{ marginVertical: 5 }}>
                Note *
            </Text>
              <Input
                placeholder="Enter Note"
                size='small'
                multiline={true}
                status={touched.note ? !errors.note ? 'success' : 'danger' : 'warning'}
                caption={(touched.note && errors.note) ? errors.note : ''}
                value={values.note}
                onChangeText={handleChange('note')}
              />
            </View>

            {this.state.formSpinner &&
              <View style={styles.centeredContentViewStyle}>
                <ActivityIndicator animating size="small" color="#fbaf3a" />
              </View>}

            {this.state.error ?
              <View style={styles.centeredContentViewStyle}>
                <Text style={styles.errorMessageStyle}>{this.state.error}</Text>
              </View> : null}

            <Layout
              style={{
                justifyContent: 'flex-end',
                flexDirection: 'row',
                marginVertical: 10,
              }}>
              <Button
                style={styles.cancelButton}
                onPress={() => this.props.navigation.goBack()}>
                Cancel
            </Button>

              <Button
                style={styles.submitButton}
              // type="submit"
              // disabled={!isValid || this.state.formSpinner}
              >
                {isValid + ' Submit'}
              </Button>
            </Layout>
          </Layout>
        </ScrollView>)}
      </Formik>
    );
  }
}

const styles = StyleSheet.create({
  submitButton: {
    borderColor: '#00c851',
    backgroundColor: '#00c851',
    marginStart: 5,
  },
  cancelButton: {
    borderColor: '#ff3547',
    backgroundColor: '#ff3547',
  },
  labelColor: {
    color: '#8F9BB3',
  },
  centeredContentViewStyle: {
    justifyContent: 'center',
    alignItems: "center",
    padding: 2,
    marginVertical: 5
  },
  errorMessageStyle: {
    color: 'red'
  }
});

const validationSchema=Yup.object（）.shape({
服务费状态：Yup.boolean（），//.oneOf（[true]，“请检查协议”），
文档状态：Yup.boolean（），//.oneOf（[true]，“请检查协议”），
安全编号：Yup.string（）
.label（'安全编号*'）
.required（'需要安全号码'），
注意：Yup.string（）.label（'note'）
})
handleSubmit=（值：任意）=>{
console.log（'AD value'，value）；
}
render（）{
返回(
{this.handleSubmit（values）}
validationSchema={validationSchema}
>
{（{handleChange，
价值观
手推，
错误，
是有效的，
提交，
感动的，
车把，
setFieldValue}
) => (
请求者类型
this.setState（{requestTypeIndex:index}）}>
检查表
setFieldValue（'service\u charge\u status'，！values.service\u charge\u status）}
/>
setFieldValue（'documents\u status'，！values.documents\u status）}
/>
保安人员号码*
注*
{this.state.formSpinner&&
}
{this.state.error？
{this.state.error}
：null}
this.props.navigation.goBack（）}>
取消
{isValid+'Submit'}
)}
);
}
}
const styles=StyleSheet.create({
提交按钮：{
边框颜色：'#00c851'，
背景颜色：“#00c851”，
玛格丽特：5，
},
取消按钮：{
边框颜色：'#ff3547'，
背景颜色：“#ff3547”，
},
labelColor：{
颜色：“#8F9BB3”，
},
centeredContentViewStyle：{
为内容辩护：“中心”，
对齐项目：“中心”，
填充：2，
边际收益：5
},
errorMessageStyle：{
颜色：“红色”
}
});

Formik希望接收ChangeEvent作为

handleChange

函数的参数。您可以使用

输入

，但不能使用

无线电

或

复选框

，因为简单地说，这些组件通过从TouchableOpacity处理常规onPress来模拟此事件

---

我的解决方案是使用钩子来处理这些更改，然后将状态与来自Formik的结果对象相结合。

我使用的是material ui，但我相信解决方案可以类似。如果将formik链接到任何库时遇到问题，请尝试公开表单/字段api并手动设置属性。当它工作时，尝试删除一些由formik自动处理的属性，以避免重新创建控制盘

以下是我实现radiogroup的方式：

<Field name="fieldName" value={formik.values.fieldName}>
  {({ form }) => (
    {/* Fragment is used here, to make possible to add a FormHelperText under Field. */}
    <React.Fragment>
      {/* Remember to use same name as in the parent Field. form.handleEvent will make it work when you click on one of the options. */}
      <RadioGroup name="fieldName" onChange={form.handleChange}>
        <FormControlLabel value="A" control={<Radio />} label="Value A" />
        <FormControlLabel value="B" control={<Radio />} label="Value B" />
        <FormControlLabel value="C" control={<Radio />} label="Value C" />
      </RadioGroup>
      <FormHelperText error={Boolean(form.errors.fieldName) && form.touched.fieldName}>
        {form.errors.fieldName}
      </FormHelperText>
    </React.Fragment>
  )}
</Field>

{（{form}）=>(
此处使用{/*片段，以便在字段.*/}下添加FormHelperText
{/*请记住使用与父字段中相同的名称。当您单击其中一个选项时，form.handleEvent将使其工作。*/}
{form.errors.fieldName}
)}

参考资料：

我将Formik与的

复选框一起使用，并最终使用
onChange
事件来解决此问题，如下所示：

<Field name="terms">
  {({ field }) => (
    <Checkbox
      id="terms"
      name="terms"
      onChange={(e) => setFieldValue('terms', e.target.checked)}
    >
      <Text fontSize="sm" textAlign="left">
        I agree to the Terms and Conditions.
      </Text>
    </Checkbox>
  )}
</Field>


{（{field}）=>(
setFieldValue（'terms'，e.target.checked）}
>
我同意这些条款和条件。
)}

我相信与UI Kitten的工作类似

这对Yup验证非常有帮助。
Uı套件或元件并不重要。您可以轻松地处理formik和yup


添加初始值
将您的radio元素添加到您的验证模式中，并按要求设置您的需求
使用setFieldValue或操纵值
然后轰
但是，您可以使用
（选中）=>formik.setFieldValue（'valueName'，选中）
如果您看到我的代码有问题，我已经实现了它，实际上参考的解决方案使用了checkbox，现在我正试图使
formik
与
UI Kitten单选按钮一起工作。谢谢你的回复。你有没有偶然发现这个问题？遇到同样的问题