如何在 React Native 中通過 Formik、Yup、Ui Kitten 使用復選框和單選按鈕

Question

我在我的應用程序中使用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'
  }
});

Answer 1

我將 Formik 與Chakra UI的Checkbox使用，並最終使用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>

我相信與 UI Kitten 的工作類似。

這個GitHub 評論對 Yup 驗證非常有幫助。

Answer 2

Formik 期望接收 ChangeEvent 作為handleChange函數的參數。 您可以使用Input ，但不能使用Radio或CheckBox因為簡而言之，這些組件通過處理來自 TouchableOpacity 的常規 onPress 來模擬此事件。

我的解決方案是使用鈎子來處理這些更改，然后將狀態與來自 Formik 的結果對象相結合。

Answer 3

我正在使用 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>

參考：

• 材質界面
• Formik 材質 UI
• Formik 字段 API

Answer 4

Uı 套件或元素無關緊要。 您可以輕松處理 formik 和是的。

• 添加初始值
• 將您的單選元素添加到您的驗證架構中，並根據需要設置您的要求。
• 使用 setFieldValue 或操縱值
• 然后轟！